fix(ui): responsive mobile padding on auth, terms, privacy, and settings pages#1052
Merged
timothyfroehlich merged 7 commits intomainfrom Feb 23, 2026
Merged
fix(ui): responsive mobile padding on auth, terms, privacy, and settings pages#1052timothyfroehlich merged 7 commits intomainfrom
timothyfroehlich merged 7 commits intomainfrom
Conversation
…ettings pages Pages using centered card/narrow layouts lacked responsive horizontal padding on mobile (375px viewport). Auth layout had flat px-6 (24px); terms, privacy, and settings max-w-* containers had no own px-*. - auth layout: px-6 → px-4 sm:px-6 (more card space on narrow screens) - terms, privacy: add px-4 sm:px-6 to max-w-3xl containers - settings: add px-4 sm:px-6 to container max-w-3xl wrapper Resolves PinPoint-o3sh Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Updates to Preview Branch (design/phase3-padding-fixes) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR standardizes responsive mobile padding across auth, legal, and settings pages to improve mobile viewport usability at 375px width. Previously, these pages used fixed 24px horizontal padding from either the auth layout or MainLayout, causing cramped layouts on narrow screens. This change aligns them with the responsive padding pattern already used by issues, machines, and other data-heavy pages.
Changes:
- Auth layout (login, signup, forgot-password, reset-password): Reduced mobile padding from 24px to 16px horizontally, freeing 16px more space for auth card content
- Terms and Privacy pages: Added responsive padding (
px-4 sm:px-6) to page containers that previously had no explicit horizontal padding - Settings page: Added responsive padding (
px-4 sm:px-6) to the container, consistent with other app pages
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/app/(auth)/layout.tsx |
Changed auth layout padding from px-6 to px-4 sm:px-6 for responsive mobile spacing |
src/app/(app)/terms/page.tsx |
Added px-4 sm:px-6 to terms page container for consistent responsive padding |
src/app/(app)/privacy/page.tsx |
Added px-4 sm:px-6 to privacy page container for consistent responsive padding |
src/app/(app)/settings/page.tsx |
Added px-4 sm:px-6 to settings page container for consistent responsive padding |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Owner
Author
|
!screenshots |
Replace ad-hoc max-w-*/px-* container divs on privacy, terms, settings, and issues pages with the existing PageShell component. This centralizes responsive padding and max-width constraints so future changes only need to touch one component. Auth layout (src/app/(auth)/layout.tsx) is intentionally left alone — it is outside the app shell and uses a standalone centered card layout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
MainLayout already wraps all (app) children in `p-6` (24px). Using
PageShell with default padded=true stacked px-6/py-10 on top, doubling
horizontal padding from 24px to 48px per side on mobile — the opposite
of the intended fix.
Switch all four PageShell usages to padded={false} so they only
contribute max-width centering. Restore original vertical padding on
settings (py-6) and issues (py-8) that was lost in the previous commit.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
timothyfroehlich
added
the
ready-for-review
Owner
Author
|
!screenshots |
Contributor
📸 Screenshot ReportView interactive Playwright report Captured across Desktop (1280×720), iPhone 13 Mini (375×812, WebKit), and Pixel 5 viewports. |
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
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.
Summary
px-6→px-4 sm:px-6in the shared auth layout. This gives the login card ~16px more horizontal space on 375px mobile viewports.px-4 sm:px-6to theirmax-w-3xl mx-autocontainers, which had no own horizontal padding.px-4 sm:px-6to itscontainer max-w-3xlwrapper, which only had verticalpy-6and no horizontal padding.These pages previously relied entirely on the flat
p-6(24px) from MainLayout for horizontal margin. Making the padding responsive and explicit on the page containers makes them consistent with thePageShellpattern already used byabout,whats-new, andhelppages.Test plan
pnpm run checkpasses (690 tests, no lint/type errors)🤖 Generated with Claude Code