diff --git a/apps/mobile/src/components/pr-review/pr-review-screen.test.tsx b/apps/mobile/src/components/pr-review/pr-review-screen.test.tsx index 9e032e372dc..01ba0feaa2a 100644 --- a/apps/mobile/src/components/pr-review/pr-review-screen.test.tsx +++ b/apps/mobile/src/components/pr-review/pr-review-screen.test.tsx @@ -272,6 +272,59 @@ describe('PrReviewScreen Submit review reachability (P1-F-46b)', () => { }); }); +// The header caps a trailing action at half the row (ScreenHeader's +// `max-w-[50%]`). A button whose label cannot shrink overflows that cap and is +// clipped by the screen edge at large font scales — the explorer found the +// Overview "Submit review" label cut off at font scale 2. The button and its +// label must shrink and wrap instead, like the Agents header action. +describe('PrReviewScreen Submit review header fit', () => { + function findSubmitButton(): React.ReactElement | null { + // eslint-disable-next-line new-cap + const element = PrReviewScreen({ owner: 'octocat', repo: 'hello', number: 7 }); + return findElement({ + node: element, + type: 'Button', + prop: 'accessibilityLabel', + value: 'Submit review', + }); + } + + it('lets the Submit review button shrink inside the header action slot', () => { + const button = findSubmitButton(); + if (!button) { + throw new Error('Submit review button not found'); + } + const className = (button.props as { className?: string }).className ?? ''; + expect(className).toContain('shrink'); + expect(className).not.toContain('shrink-0'); + expect(className).toContain('min-w-0'); + }); + + it('lets the Submit review label wrap instead of drawing off-screen', () => { + const button = findSubmitButton(); + if (!button) { + throw new Error('Submit review button not found'); + } + const label = findElement({ + node: button, + type: 'Text', + prop: 'className', + value: 'shrink text-center', + }); + if (!label) { + throw new Error('Submit review label not found'); + } + const labelProps = label.props as { + numberOfLines?: number; + allowFontScaling?: boolean; + }; + // Wrapping, not truncation: no line cap and no disabled scaling, so a + // large font scale grows the button instead of clipping the label. + expect(labelProps.numberOfLines).toBeUndefined(); + expect(labelProps.allowFontScaling).not.toBe(false); + }); +}); + describe('PrReviewScreen share action', () => { beforeEach(() => { prQueryResult = { diff --git a/apps/mobile/src/components/pr-review/pr-review-screen.tsx b/apps/mobile/src/components/pr-review/pr-review-screen.tsx index 909bf753761..aee8846e9e9 100644 --- a/apps/mobile/src/components/pr-review/pr-review-screen.tsx +++ b/apps/mobile/src/components/pr-review/pr-review-screen.tsx @@ -296,10 +296,15 @@ export function PrReviewScreen({ owner, repo, number }: PrReviewScreenProps) { onPress={openReviewSubmit} disabled={loadFailed} accessibilityLabel={t('prReview.submit.submitReview')} - className={cn('px-3')} + // ScreenHeader caps a trailing action at half the row. A label + // that cannot shrink overflows that cap and is clipped by the + // screen edge at large font scales, so the button and its + // label shrink and wrap (as the Agents header action does) + // instead of drawing off-screen. + className={cn('min-w-0 shrink px-3')} > - {t('prReview.submit.submitReview')} + {t('prReview.submit.submitReview')} ) : null}