Repository navigation
Separate desktop hover dropdowns from mobile tap menus - #21
Conversation
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![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: a3d499310d
ℹ️ 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".
| body > nav:first-of-type details[open] > ul, | ||
| body > header:first-child > nav details[open] > ul { | ||
| display: flex; |
There was a problem hiding this comment.
On a touch-only device whose viewport is wider than 40rem—such as a tablet or phone in landscape—the fine-pointer hover query does not match, while this [open] rule is excluded by the width query. Tapping the summary therefore sets open, but the submenu remains under the base display: none, making every dropdown destination inaccessible. Scope the tap-open rule by pointer capability rather than viewport width, or leave [open] > ul enabled globally.
Useful? React with 👍 / 👎.
| body > nav:first-of-type details[open] > ul, | ||
| body > header:first-child > nav details[open] > ul { | ||
| display: flex; | ||
| @media (hover: hover) and (pointer: fine) { |
There was a problem hiding this comment.
On a device reporting hover: none or a coarse primary pointer, using an attached keyboard or switch input no longer reveals a plain nested-list submenu because its :focus-within rule is now gated by this fine-pointer query. The submenu consequently remains at the base display: none even when its trigger receives keyboard focus, regressing the documented keyboard-focus behavior. Gate only the :hover selectors and leave the :focus-within selectors unconditional.
Useful? React with 👍 / 👎.
| min-width: min(18rem, calc(100vw - 2rem)); | ||
| width: max-content; | ||
| min-width: 12rem; | ||
| max-width: min(18rem, calc(100vw - 1rem)); |
There was a problem hiding this comment.
When a desktop submenu label is wider than 18rem, this new cap constrains the menu but the inherited navbar rule still gives every link white-space: nowrap. Because the menu also has overflow-y: auto, its horizontal overflow computes to scrollable, so verbose destination labels now require horizontal scrolling inside the dropdown instead of fitting within the available viewport as they did before. Override white-space for submenu links or otherwise handle overflow when applying the cap.
Useful? React with 👍 / 👎.
Desktop
Mobile
details/summarytap-to-open behaviorValidation