PR-SETTINGS-SHELL-OWNS-LAYOUT-0: shell owns page chrome; bordered rows - #137
Merged
Conversation
… to bordered cards WAWQAQ msg 70c224f4 + eafc18a1 raised two corrections: 1. **Systematic**: per-page hand-fixing was the wrong approach. Every sub-page baked its own outer wrapper that managed max-width + page padding (settingsStructuredPage, settingsAboutPage, etc.) — so a "fix all 12 pages" turned into 12 separate edits. Move the page-frame chrome UP a level to `.settingsPageContentInner` (the OverlayScrollArea inner div every page renders through). All 12 pages now inherit max-w-3xl + 40/24/64 padding from one place; sub-pages only manage their internal block stack. 2. **Reference correction**: in PR-SETTINGS-PAGE-BODY-0 I'd stripped the per-row borders, claiming reference used flat rows. WAWQAQ showed a screenshot proving reference DOES use bordered cards (1px subtle border + ~8px radius). Reinstated per-row chrome on `.settingsFormRow` and `.settingsRow` — 1px border, 8px radius, light bg, 8px gap between rows. Hover state amplifies the border tone (no bg flash). Concrete CSS: - `.settingsPageContentInner` (the shell): `max-width: 768px; margin: 0 auto; padding: 40px 24px 64px`. This is the single owner now. - `.settingsStructuredPage`: just `display: grid; gap: 8px` — passthrough. - `.settingsAboutPage`: just `display: grid; gap: 16px` — same. - `.settingsFormRow` and `.settingsRow`: 1px border, 8px radius, background fill, border-color hover state. Because the shell owns layout, the PermissionCenter / HealthCenter / ProvidersPanel / WebSearch / Voice / Models pages — which I had NO visual smoke fixture for — also now get the right chrome automatically without per-page CSS. That's the structural answer to "systematic methodology, not page-by-page polish." 1465 / 1465 tests pass.
This was referenced Aug 4, 2026
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.
Summary
WAWQAQ msg `70c224f4` raised the methodology question — page-by-page hand-fixing was the wrong shape. Msg `eafc18a1` corrected my earlier "reference uses flat rows" claim with a screenshot showing reference DOES use 1px-bordered cards.
Two structural changes:
Shell owns layout — every sub-page was baking its own outer wrapper (`settingsStructuredPage`, `settingsAboutPage`, `settingsPermissionPage`, `settingsHealthPage`) that re-managed `max-width` + page padding. Moved the page-frame chrome up a level to `.settingsPageContentInner` (the single OverlayScrollArea inner div every page renders through). All 12 pages now inherit `max-w-3xl` + `40/24/64` padding from ONE place. Sub-pages only manage their own row stack.
Reference correction — PR-SETTINGS-PAGE-BODY-0 stripped per-row borders calling them "flat". WAWQAQ's screenshot showed I was wrong — reference rows are 1px bordered cards with ~8px radius. Reinstated chrome on `.settingsFormRow` and `.settingsRow` — 1px border, 8px radius, light bg, 8px gap. Hover state amplifies the border tone.
The PermissionCenter / HealthCenter / ProvidersPanel / WebSearch / Voice / Models pages — which I had no visual smoke fixture for and couldn't have hand-fixed — now automatically inherit the right chrome too. That's the structural answer to "systematic methodology, not per-page polish."
Test plan