fix(onboarding): make product selection continue button reachable on mobile#63150
Open
fercgomes wants to merge 1 commit into
Open
fix(onboarding): make product selection continue button reachable on mobile#63150fercgomes wants to merge 1 commit into
fercgomes wants to merge 1 commit into
Conversation
…mobile The product selection screen vertically centered its content inside a 100vh container. On mobile browsers, 100vh includes the area behind the bottom browser chrome, so the centered Continue button sat behind it — and because the content fit within 100vh, the scroll container never grew, leaving the button unreachable without force-scrolling. Top-align the content on mobile (justify-start) so the scroll container can grow and reveal the button, and add safe-area-aware bottom padding so it clears the browser chrome. All changes are gated behind the sm breakpoint, leaving desktop layout unchanged. Generated-By: PostHog Code Task-Id: c312ed5c-5699-40b3-99ea-4c2ccc67129a
Contributor
|
Hey @fercgomes! 👋 It looks like your git author email on this PR isn't your
You can fix it for this repo with: git config user.email "you@posthog.com"Or set it globally with |
Contributor
|
Reviews (1): Last reviewed commit: "fix(onboarding): make product selection ..." | Re-trigger Greptile |
Contributor
|
Size Change: 0 B Total Size: 72.4 MB ℹ️ View Unchanged
|
Contributor
🕸️ Eager graphHow much code each root forces the browser to download and decode through static imports — the regression class total bundle size can't see.
✅ Largest files eagerly reachable from
|
| Size | File |
|---|---|
| 878.2 KiB | src/styles/global.scss |
| 609.0 KiB | public/hedgehog/burning-money-hog.png |
| 541.9 KiB | public/hedgehog/waving-hog.png |
| 448.2 KiB | public/hedgehog/stop-sign-hog.png |
| 362.0 KiB | public/hedgehog/phone-pair-hogs.png |
| 354.8 KiB | ../node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
| 335.6 KiB | public/hedgehog/desk-hog.png |
| 323.2 KiB | public/hedgehog/3-bears-hogs.png |
| 297.4 KiB | src/taxonomy/core-filter-definitions-by-group.json |
| 286.4 KiB | src/lib/api.ts |
Largest files eagerly reachable from src/scenes/AuthenticatedShell.tsx
| Size | File |
|---|---|
| 878.2 KiB | src/styles/global.scss |
| 760.0 KiB | src/queries/validators.js |
| 609.0 KiB | public/hedgehog/burning-money-hog.png |
| 541.9 KiB | public/hedgehog/waving-hog.png |
| 448.2 KiB | public/hedgehog/stop-sign-hog.png |
| 398.7 KiB | ../node_modules/.pnpm/chart.js@4.5.1/node_modules/chart.js/dist/chart.js |
| 362.0 KiB | public/hedgehog/phone-pair-hogs.png |
| 354.8 KiB | ../node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
| 335.6 KiB | public/hedgehog/desk-hog.png |
| 323.2 KiB | public/hedgehog/3-bears-hogs.png |
Posted automatically by check-eager-graph · sizes are input-source bytes from the esbuild metafile · part of #32479
fercgomes
requested review from
a team,
MattBro and
rafaeelaudibert
and removed request for
a team
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On mobile, the onboarding product selection screen vertically centered its content inside a
100vhcontainer. Mobile browsers count the area behind the bottom browser chrome as part of100vh, so the centered Continue button rendered behind it. Worse, because the content fit within100vh, the scroll container never grew — so the button could not be revealed by normal scrolling, only by force-scrolling. Several users couldn't reach the Continue/Get started button to proceed.Changes
justify-startinstead ofjustify-center) so the scroll container grows with the content and the button becomes reachable.max(env(safe-area-inset-bottom), 80px)) so the button clears the browser chrome / device notch — mirroring the formula already used for--scene-padding-bottomelsewhere.smbreakpoint (sm:justify-center,sm:pb-4), so desktop layout is pixel-identical to before.Applied to both the legacy product selection and the shared
ProductCarousel(used by the spotlight and multiproduct variants), covering all three product-selection screen variants.How did you test this code?
I'm an agent (PostHog Slack app). I did not run manual or automated tests — the change is CSS-class-only (responsive Tailwind utilities) with no logic changes. Reviewers should verify on a mobile viewport (< 640px) that the Continue button is visible/reachable across the legacy, spotlight, and multiproduct variants, and confirm desktop is unchanged.
Automatic notifications
Docs update
🤖 Agent context
Autonomy: Human-driven (agent-assisted)
Authored by the PostHog Slack app from a Slack thread reporting that mobile sign-up pages were "off" and the Continue buttons unreachable. Diagnosed the root cause as
justify-centerinside a100vhminimal-layout scroll container combined with mobile browser chrome eating into the viewport. Chose a breakpoint-gated, CSS-only fix (top-align + safe-area bottom padding on mobile) to avoid any desktop regression, rather than restructuring the layout. Scope was intentionally limited to the product selection screen as reported.Created with PostHog Code from a Slack thread