feat(settings): mobile gutter, wrapping header, touch-safe ghost hover - #14
Merged
Merged
Conversation
PageShell's page variant gains a <md gutter step (px-4/pt-6/pb-8, desktop px-6/pt-10/pb-12 unchanged at >=md), matching the SettingsShell/DetailPane step so phones keep a 16px margin. PageHeader's framed title row now wraps (flex-wrap) instead of crushing the title into truncation when actions can't fit; wrapped actions go full-width below md so a search field stays usable. The wrap is content-driven, not a breakpoint, so narrow desktop split panes benefit too.
iOS Safari auto-zooms the page when a focused field renders under 16px, and the zoom strands the user in a shifted viewport after the keyboard closes. text-base below md, text-control (14px) rhythm unchanged on desktop.
On touch, a tap leaves the button in a sticky :hover state, so the ghost chip stayed painted after the finger lifted — a menu trigger kept reading active after its menu closed. The open-state selectors (data-state=open / aria-expanded) are deliberately NOT gated: an open trigger must stay lit on every platform. Touch press feedback continues to come from :active.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7ea8251046
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Merged
6 tasks
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.
Companion to the Memoh web mobile shell (
memohai/Memohfeat/web-mobile-shell). Desktop ≥md rendering stays pixel-identical throughout.PageShell / PageHeader — mobile gutter + wrapping header
px-4/pt-6/pb-8); ≥md desktop values unchanged.Menu search input — iOS focus zoom
text-base(16px) below md: iOS Safari auto-zooms the page when a focused field renders under 16px, and the zoomed viewport stays shifted after the keyboard closes. Desktop rhythm (text-control, 14px) unchanged.Ghost hover chip — touch sticky
:hover:hoverstate, so the ghost chip stayed painted after the finger lifted — a menu trigger kept reading "active" after its menu closed. The hover chip is now gated behind@media (hover: hover); the open-state selectors (data-state=open/aria-expanded) are deliberately NOT gated so an open trigger stays lit on every platform. Touch press feedback comes from:active.Verification
max-md-scoped or hover-media-gated.