Surfaced while closing out plans/site-check-153.md (PR #154), which fixed the anonymous-state overflow in the same band.
Tailwind's container is 768px wide across the whole 768–1023 range, leaving a 736px content box. Signed-out, the header now fits (measured 752px right edge at 768). Signed-in, AuthControls renders avatar + full name + caret (hidden sm:inline on the name), which is roughly 100px wider than the "Sign in" button, so the utility cluster pushes "Help Wanted" onto two lines and the document scrolls horizontally again. This predates #154 (the name + 192px search + Volunteer already exceeded the box).
Options: hide the name below lg in the desktop cluster only (the same AuthControls also renders in the mobile bar at 640–767, where there is room for it, so it needs a prop or a second breakpoint), or shorten to first name below lg. The aria-label="Account menu for …" already carries the accessible name, so hiding the visible text costs nothing for AT.
Surfaced while closing out
plans/site-check-153.md(PR #154), which fixed the anonymous-state overflow in the same band.Tailwind's
containeris 768px wide across the whole 768–1023 range, leaving a 736px content box. Signed-out, the header now fits (measured 752px right edge at 768). Signed-in,AuthControlsrenders avatar + full name + caret (hidden sm:inlineon the name), which is roughly 100px wider than the "Sign in" button, so the utility cluster pushes "Help Wanted" onto two lines and the document scrolls horizontally again. This predates #154 (the name + 192px search + Volunteer already exceeded the box).Options: hide the name below
lgin the desktop cluster only (the sameAuthControlsalso renders in the mobile bar at 640–767, where there is room for it, so it needs a prop or a second breakpoint), or shorten to first name belowlg. Thearia-label="Account menu for …"already carries the accessible name, so hiding the visible text costs nothing for AT.