Header CTA is still 25px past the right edge at iPad portrait #238

New Issue

Closed

opened 2026-09-10 07:07:23 -05:00 by null · 0 comments

null commented

2026-09-10 07:07:23 -05:00

Owner

Found at build a25077d, on the working tree carrying Batch 17 and 18.

A regression of #214, which was fixed and released without ever being exercised. v0.9.5 tightened the nav from gap-6 to gap-4 at md and was checked in a desktop browser window sized to 768. A desktop window at 768 has a scrollbar, so the layout viewport was about 753px, the md breakpoint never engaged, and the desktop header the fix was about was never on screen. On a real 768px device it was unchanged: Request Consultation sat 25px past the right edge on all 19 routes, and body{overflow-x:hidden} sliced it off with no scrollbar to hint that anything was missing.

Measured at a true 768 (iPad Mini profile): brand 262px, nav 401px, CTA 114px, container padding 16px each side. The CTA's natural width is 176px, so flex had already shrunk it by 62px and wrapped its label inside a 36px-tall box, and it still did not fit. The three items want 787px of natural width against 736px of container. No amount of gap tightening fits them, which is why the previous approach could not have worked.

Fix: the desktop row starts at lg. 768 to 1023 gets the Sheet menu, which is the better tablet experience anyway: 44px rows instead of 17px ones, and the Services and Industries submenus are reachable, where the desktop dropdowns open on hover and a touch device has no hover. The wordmark holds at text-xl until xl, because at exactly 1024 the desktop row had four pixels of room.

Trap: the CTA now carries shrink-0 whitespace-nowrap. Without it, flex answers a row that does not fit by squeezing the button and wrapping its label, which keeps the total inside the viewport while the button itself is already past it. That is the failure mode that made this survive a release.

Verify: node scripts/device-sweep.mjs --devices "iPad Mini" reports zero findings, and reverting the header to md:flex / md:block / md:hidden makes it report past_viewport on all 19 routes.

Found at build a25077d, on the working tree carrying Batch 17 and 18. **A regression of #214, which was fixed and released without ever being exercised.** v0.9.5 tightened the nav from `gap-6` to `gap-4` at `md` and was checked in a desktop browser window sized to 768. A desktop window at 768 has a scrollbar, so the layout viewport was about 753px, the `md` breakpoint never engaged, and the desktop header the fix was about was never on screen. On a real 768px device it was unchanged: `Request Consultation` sat 25px past the right edge on **all 19 routes**, and `body{overflow-x:hidden}` sliced it off with no scrollbar to hint that anything was missing. Measured at a true 768 (iPad Mini profile): brand 262px, nav 401px, CTA 114px, container padding 16px each side. The CTA's *natural* width is 176px, so flex had already shrunk it by 62px and wrapped its label inside a 36px-tall box, and it still did not fit. The three items want 787px of natural width against 736px of container. **No amount of gap tightening fits them**, which is why the previous approach could not have worked. Fix: the desktop row starts at `lg`. 768 to 1023 gets the `Sheet` menu, which is the better tablet experience anyway: 44px rows instead of 17px ones, and the Services and Industries submenus are reachable, where the desktop dropdowns open on hover and a touch device has no hover. The wordmark holds at `text-xl` until `xl`, because at exactly 1024 the desktop row had four pixels of room. Trap: the CTA now carries `shrink-0 whitespace-nowrap`. Without it, flex answers a row that does not fit by squeezing the button and wrapping its label, which keeps the *total* inside the viewport while the button itself is already past it. That is the failure mode that made this survive a release. Verify: `node scripts/device-sweep.mjs --devices "iPad Mini"` reports zero findings, and reverting the header to `md:flex` / `md:block` / `md:hidden` makes it report `past_viewport` on all 19 routes.