From 87101f7b0dc4cda9082fc1f52032765521e65240 Mon Sep 17 00:00:00 2001 From: Rafael Fernandes Date: Thu, 24 Sep 2026 12:13:38 -0300 Subject: [PATCH 1/2] fix(layout): keep the header nav on one line on small screens - 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 --- src/app/_layout/_components/navigation.tsx | 14 +++-- src/app/_layout/_components/siteHeader.tsx | 2 +- .../_page/_components/engineeringSection.tsx | 4 +- tests/responsive.spec.ts | 56 +++++++++++++++++++ 4 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 tests/responsive.spec.ts diff --git a/src/app/_layout/_components/navigation.tsx b/src/app/_layout/_components/navigation.tsx index 2887a17..a7c8e3a 100644 --- a/src/app/_layout/_components/navigation.tsx +++ b/src/app/_layout/_components/navigation.tsx @@ -57,8 +57,14 @@ const Navigation = ({ items, label, home, className }: NavigationProps) => { const active = useActiveSection(items.map(({ id }) => id).join(','), home) return ( -