Skip to content

fix(layout): keep the header nav on one line on small screens - #59

Merged
raferdev merged 2 commits into
mainfrom
fix/small-screens
Sep 24, 2026
Merged

raferdev merged 2 commits into
mainfrom
fix/small-screens

Conversation

@raferdev

Copy link
Copy Markdown
Owner

Summary

  • Bug: the Portuguese nav wrapped to two rows at 320px and again at 768px (where the one-row desktop header starts). The active underline is positioned for the header border, so on a wrapped nav it landed in the middle of the second row.
  • Fix: the nav never wraps. Gaps scale with the viewport, the text drops to 12px below 360px, and only below 320px does it fall back to a hidden horizontal scroll. JetBrains Mono snaps both 13px and 14px to an 8px advance, so 12px is the first size that actually saves width. On phones the underline now sits inside the nav row, right on the header border.
  • Also fixed at 280px (Galaxy Fold folded): the toolbox grid and the handwritten note under it made the whole page scroll sideways. The grid drops to one column below 320px, and the note shrinks slightly there.

Verification

  • Layout audit across all 4 pages at 17 widths (280–1280px): no horizontal overflow, single-row nav, underline on the header border.
  • New tests/responsive.spec.ts checks the same things at 320/360/414/768/1024px on every page. It fails on the old code at exactly the reported cases (/pt and /pt/privacidade at 320px and 768px).
  • Mobile screenshot baselines regenerated on CI; desktop baselines unchanged.

🤖 Generated with Claude Code

raferdev and others added 2 commits September 24, 2026 12:13
- the Portuguese nav wrapped at 320px and at 768px, leaving the active
  underline in the middle of the second row
- nav no longer wraps: gaps scale with width, 12px text below 360px
  (JetBrains Mono snaps 13px and 14px to the same 8px advance), and a
  hidden horizontal scroll only below 320px
- on phones the underline sits inside the nav row on the header border
- toolbox grid drops to one column below 320px and the handwritten note
  shrinks there, removing horizontal page scroll at 280px
- responsive spec checks no page overflow, a single nav row and the
  underline position on every page from 320px to 1024px

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Generated on CI with the Checks workflow's update_snapshots run. Desktop
baselines are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Sep 24, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 2abd5d1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@raferdev
raferdev merged commit 36924b4 into main Sep 24, 2026
8 checks passed
@raferdev
raferdev deleted the fix/small-screens branch September 24, 2026 16:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant