fix(ui): align mobile nav menu items with divider lines#136
Merged
danielnaab merged 9 commits intomainfrom May 7, 2026
Merged
Conversation
The mobile nav panel has padding: 1rem, but nav links added an additional padding-inline: 1rem, causing link text to be inset from the border separator lines between items. Remove the redundant inline padding so text aligns flush with the dividers.
The close button used float:right which is ignored in flex containers, causing it to consume a full row (~4rem) of vertical space and push nav items down. Position it absolutely in the top-right corner instead. Also remove the first nav item's top border and the redundant link inline padding so items align flush with the panel's divider lines.
- Close button: use align-self: flex-end with negative margins instead of absolute positioning (which overlapped first two nav items) - User panel: reset full padding (not just padding-inline) on mobile to eliminate inherited desktop spacing - Settings link and signout button: zero out padding-inline on mobile so text aligns with nav links and divider lines
Root cause: float:right on the close button is ignored in flex containers, so it consumed ~3.25rem of vertical space as a flex row instead of floating out of flow. This pushed nav items down by roughly two section-heights. Fix: - Close button: position absolute in top-right corner (restoring the original float:right intent without consuming flow space) - First nav item: remove top border (no orphan line at list top) - Nav links: padding-inline 0 so text aligns with divider lines (panel padding already provides the overall inset)
Root cause: the close button's base styles (float:right, margin with 1rem bottom) were never fully neutralized in the mobile override. In a flex column container float is ignored, so the button consumed ~3.25rem as a flex row. Previous fix attempts added position:absolute but left float and margin inherited, which could still affect layout on iOS WebKit. Fix: explicitly reset float:none and margin:0 alongside position: absolute, using physical properties (top/right) for maximum browser compatibility. Also remove first-child top border and zero out nav link inline padding so text aligns flush with divider lines.
The design system switched spacing tokens to px units, but the header component still used hardcoded rem values. On iOS, rem can resolve differently than expected. Convert mobile nav styles to px and token variables for consistency with the rest of the design system: - padding: 1rem → var(--flex-space-md) - close button insets: 0.5rem → var(--flex-space-sm) - nav link padding: 0.75rem → 12px - panel width/animation: 15rem → 240px
Root cause: the mobile nav used display:flex, which silently disabled float:right on the close button. The nav-list (also display:flex) created a block formatting context that couldn't overlap the float. Combined with hardcoded rem values (vs the design system's px tokens), this caused the close button to consume ~3.25rem of vertical space, pushing nav items down by roughly two section-heights. Rewrite the mobile nav panel to use display:block throughout: - Nav panel: display:block (via .is-visible), not flex - Nav list: display:block, not flex — no BFC, float works naturally - Nav links: display:block with block-size:auto (override desktop 100%) - Close button: float:right works as originally designed - All rem values → px or design token variables - Physical properties (top/right/bottom) for iOS compatibility - First nav item border removed, link padding-inline zeroed
Replace hardcoded 12px with var(--flex-space-sm) to stay on the design system's spacing scale.
Sort imports to satisfy biome organizeImports rule.
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
padding: 1remproviding overall inset, but nav links added a redundantpadding-inline: 1rem, pushing link text 1rem further inward than the border separator lines between itemsTest plan