Header CTA is clipped at 768px — iPad portrait loses Request Consultation #214

New Issue

Closed

opened 2026-08-18 04:01:07 -05:00 by null · 1 comment

null commented

2026-08-18 04:01:07 -05:00

Owner

Found by rendering the deployed site, not by reading markup. Build SHA cf92354, live at v0.9.4.

What is true now. At exactly 768px the desktop layout switches on (md:), and the header's primary CTA does not fit:

viewport   "Request Consultation" CTA      result
740px      not rendered (mobile layout)    n/a
768px      x 676 - 778,  viewport 768      CLIPPED, 10px cut off
800px      x 676 - 784,  viewport 800      fits
850px      x 697 - 834,  viewport 850      fits
1024px     x 850 - 1008, viewport 1024     fits

Why nobody noticed. src/index.css sets overflow-x: hidden on html and body, so the overflow produces no scrollbar and no horizontal scroll — the button is simply sliced off at the right edge with nothing indicating it.

What it costs. 768px is iPad portrait, one of the most common tablet viewports there is. The clipped element is the site's primary conversion action, and at that width the mobile menu is already hidden (md:hidden), so the CTA is not reachable from the burger either.

Severity P1 rather than P2: it is not cosmetic, it is the conversion path, and it is materially wrong on a mainstream device.

Where. src/components/layout/Header.jsx — the nav is hidden md:flex items-center gap-6 and the CTA is hidden md:block with h-9 px-3. The nav's five gap-6 (24px) gaps are the slack: dropping to gap-4 at md frees 40px, more than the 10px needed, without pushing the CTA out to lg: and leaving 768-1023px with no CTA at all.

The trap. Do not fix this by removing overflow-x: hidden — that is load-bearing elsewhere, and removing it converts a clipped button into a horizontally scrolling page on every narrow viewport.

Verify: node scripts/qa-browser.mjs --paths / --viewports 768 reports no element past the right edge, and the CTA's getBoundingClientRect().right is <= 768 at a 768px viewport.

Found by rendering the deployed site, not by reading markup. Build SHA `cf92354`, live at v0.9.4. **What is true now.** At exactly 768px the desktop layout switches on (`md:`), and the header's primary CTA does not fit: viewport "Request Consultation" CTA result 740px not rendered (mobile layout) n/a 768px x 676 - 778, viewport 768 CLIPPED, 10px cut off 800px x 676 - 784, viewport 800 fits 850px x 697 - 834, viewport 850 fits 1024px x 850 - 1008, viewport 1024 fits **Why nobody noticed.** `src/index.css` sets `overflow-x: hidden` on html and body, so the overflow produces no scrollbar and no horizontal scroll — the button is simply sliced off at the right edge with nothing indicating it. **What it costs.** 768px is iPad portrait, one of the most common tablet viewports there is. The clipped element is the site's primary conversion action, and at that width the mobile menu is already hidden (`md:hidden`), so the CTA is not reachable from the burger either. Severity P1 rather than P2: it is not cosmetic, it is the conversion path, and it is materially wrong on a mainstream device. **Where.** `src/components/layout/Header.jsx` — the nav is `hidden md:flex items-center gap-6` and the CTA is `hidden md:block` with `h-9 px-3`. The nav's five `gap-6` (24px) gaps are the slack: dropping to `gap-4` at md frees 40px, more than the 10px needed, without pushing the CTA out to `lg:` and leaving 768-1023px with no CTA at all. **The trap.** Do not fix this by removing `overflow-x: hidden` — that is load-bearing elsewhere, and removing it converts a clipped button into a horizontally scrolling page on every narrow viewport. Verify: `node scripts/qa-browser.mjs --paths / --viewports 768` reports no element past the right edge, and the CTA's getBoundingClientRect().right is <= 768 at a 768px viewport.

null added this to the Batch 16 — Viewport defects found by browser measurement milestone 2026-08-18 04:01:07 -05:00

null added the

label 2026-08-18 04:01:07 -05:00

null referenced this issue from a commit

2026-08-18 04:05:43 -05:00

fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px

null commented

2026-08-18 04:08:56 -05:00

Author

Owner

Fixed in 231f07c, released as v0.9.5 and DEPLOYED to production on 2026-08-18.

The nav's md gap went from gap-6 to gap-4 lg:gap-6 in src/components/layout/Header.jsx, freeing 40px where 10 were needed. The CTA stays at md: rather than being deferred to lg:, so 768-1023px keeps its conversion button instead of losing it.

Measured on the live site, at the viewport in the title:

before   CTA x 676 - 778   viewport 768   CLIPPED by 10px
after    CTA x 636 - 752   viewport 768   FULLY VISIBLE, 16px clear

scripts/qa-browser.mjs --paths / --viewports 768 reports no element past the right edge, where before the fix it reported two (the wrapper div and the anchor, both at right=809).

Verify: at a 768px viewport on https://queuenorth.com/, the header 'Request Consultation' link's getBoundingClientRect().right is 752 against a viewport of 768.

Fixed in 231f07c, released as v0.9.5 and DEPLOYED to production on 2026-08-18. The nav's md gap went from `gap-6` to `gap-4 lg:gap-6` in src/components/layout/Header.jsx, freeing 40px where 10 were needed. The CTA stays at `md:` rather than being deferred to `lg:`, so 768-1023px keeps its conversion button instead of losing it. Measured on the live site, at the viewport in the title: before CTA x 676 - 778 viewport 768 CLIPPED by 10px after CTA x 636 - 752 viewport 768 FULLY VISIBLE, 16px clear `scripts/qa-browser.mjs --paths / --viewports 768` reports no element past the right edge, where before the fix it reported two (the wrapper div and the anchor, both at right=809). Verify: at a 768px viewport on https://queuenorth.com/, the header 'Request Consultation' link's getBoundingClientRect().right is 752 against a viewport of 768.

null closed this issue

2026-08-18 04:08:56 -05:00