fix(onboarding): keep consent CTA visible at large text scaling#7207
fix(onboarding): keep consent CTA visible at large text scaling#7207
Conversation
Cap the bottom card at the available viewport height and make the heading/body/footer scrollable so the 'Agree and continue' button stays pinned at the bottom when system text is enlarged. Previously the inner Column had unbounded height and pushed the button off-screen for accessibility text sizes.
Greptile SummaryThis PR fixes an accessibility regression where the Agree and continue button on the
Confidence Score: 4/5Safe to merge — the layout change correctly preserves the CTA at all text scales without touching any business logic or data paths. The ConstrainedBox + Flexible(SingleChildScrollView) approach is a well-established Flutter pattern for this use case and works correctly at both default and maximum accessibility text sizes. The only finding is a pre-existing double bottom safe-area accounting that causes the button to float higher than intended on devices with a home-indicator inset; the defect is cosmetic and not introduced by this change. app/lib/pages/onboarding/ai_consent_widget.dart — specifically the combination of manual bottom padding and SafeArea around the inner column. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[build context] --> B[MediaQuery.of context]
B --> C[Outer Column]
C --> D[Expanded - fills remaining space]
C --> E[ConstrainedBox\nmaxH = screen - safeTop - 16]
E --> F[Container\nblack, rounded top corners\npadding bottom = safeBottom + 8]
F --> G[SafeArea top:false\nadds safeBottom padding]
G --> H[Inner Column\nmainAxisSize: min]
H --> I[Flexible - FlexFit.loose\nallocation = maxH - 84px]
I --> J[SingleChildScrollView]
J --> K[Heading + Body + Footer link]
H --> L[SizedBox height 28 - rigid]
H --> M[ElevatedButton height 56 - rigid]
Reviews (1): Last reviewed commit: "fix(onboarding): keep consent CTA visibl..." | Re-trigger Greptile |
| padding: EdgeInsets.fromLTRB(32, 26, 32, mediaQuery.padding.bottom + 8), | ||
| decoration: const BoxDecoration( | ||
| color: Colors.black, | ||
| borderRadius: BorderRadius.only(topLeft: Radius.circular(40), topRight: Radius.circular(40)), | ||
| ), | ||
| child: SafeArea( | ||
| top: false, |
There was a problem hiding this comment.
Double bottom safe-area padding
The Container already sets padding.bottom = mediaQuery.padding.bottom + 8, and then SafeArea(top: false) adds another mediaQuery.padding.bottom below the inner Column's content. On a device with a 34 pt home-indicator inset (iPhone 15 Pro) the button ends up sitting 76 pt above the card's bottom edge instead of the intended ~42 pt — noticeably floating when viewed at default text size. Removing one of the two accounting mechanisms (either drop SafeArea and keep the manual padding, or zero out the manual bottom padding and rely purely on SafeArea) would fix the over-spacing. This behaviour predated this PR but the refactor is a good opportunity to clean it up.
Summary
Data & Privacyconsent screen pushed the Agree and continue button off-screen when system text scaling was set to a large accessibility size (heading + body filled the entire viewport, button + footer link clipped below the bottom edge).screen - safeAreaTop - 16) and wrap the heading/body/footer in aFlexible(SingleChildScrollView)so the body scrolls while the CTA stays pinned at the bottom.Files
app/lib/pages/onboarding/ai_consent_widget.dartTest plan