UI: Header dropdown menus clip on constrained viewports #195

New Issue

Closed

opened 2026-05-29 16:45:55 -05:00 by null · 1 comment

null commented

2026-05-29 16:45:55 -05:00

Owner

Severity: Major

Description: Desktop Services and Industries dropdowns use absolute top-full left-0 w-64 but parent nav container may clip or push the dropdown when page has padding or constrained containers.

File: src/components/layout/Header.jsx lines 71-115

Fix direction: Ensure parent nav container has overflow-visible or position dropdowns relative to trigger element.

**Severity:** Major **Description:** Desktop Services and Industries dropdowns use `absolute top-full left-0 w-64` but parent nav container may clip or push the dropdown when page has padding or constrained containers. **File:** `src/components/layout/Header.jsx` lines 71-115 **Fix direction:** Ensure parent nav container has `overflow-visible` or position dropdowns relative to trigger element.

null added the

bug

labels 2026-05-29 16:45:55 -05:00

null added this to the Batch 11 — UI defects on narrow viewports milestone 2026-08-18 01:24:53 -05:00

null commented

2026-08-18 03:53:10 -05:00

Author

Owner

Not a defect — measured in a real browser against the live site (v0.9.4), not reasoned about.

The claim is that the parent nav container 'may clip or push the dropdown'. It does not, and there is no ancestor that could.

Walked every ancestor of the open dropdown from its parent up to reading getComputedStyle(el).overflow. Every one is visible. There is no clipping ancestor to fix.

Then measured the dropdown geometry with the menu actually open, at the three widths where a right-edge overflow would show up first (the desktop nav appears at md = 768px, so 768 is the worst case):

768px   Services   left=335 right=591  viewport=768   off-screen: no   h-scroll: no
768px   Industries left=417 right=673  viewport=768   off-screen: no   h-scroll: no
820px   Services   left=335 right=591  viewport=820   off-screen: no   h-scroll: no
820px   Industries left=417 right=673  viewport=820   off-screen: no   h-scroll: no
1024px  Services   left=464 right=720  viewport=1024  off-screen: no   h-scroll: no
1024px  Industries left=546 right=802  viewport=1024  off-screen: no   h-scroll: no

The worst case is the Industries dropdown at 768px, which ends 95px clear of the right edge. document.documentElement.scrollWidth never exceeded the viewport width, so nothing is pushing the layout either.

Closing as no change required. Note the issue's own wording — 'may clip or push' — is speculative; this is the measurement.

Verify: open the Services or Industries dropdown at a 768px viewport and read its getBoundingClientRect(); right edge is 591 and 673 respectively, against a 768px viewport, with no ancestor having overflow other than visible.

Not a defect — measured in a real browser against the live site (v0.9.4), not reasoned about. The claim is that the parent nav container 'may clip or push the dropdown'. It does not, and there is no ancestor that could. Walked every ancestor of the open dropdown from its parent up to <body> reading getComputedStyle(el).overflow. **Every one is `visible`.** There is no clipping ancestor to fix. Then measured the dropdown geometry with the menu actually open, at the three widths where a right-edge overflow would show up first (the desktop nav appears at md = 768px, so 768 is the worst case): 768px Services left=335 right=591 viewport=768 off-screen: no h-scroll: no 768px Industries left=417 right=673 viewport=768 off-screen: no h-scroll: no 820px Services left=335 right=591 viewport=820 off-screen: no h-scroll: no 820px Industries left=417 right=673 viewport=820 off-screen: no h-scroll: no 1024px Services left=464 right=720 viewport=1024 off-screen: no h-scroll: no 1024px Industries left=546 right=802 viewport=1024 off-screen: no h-scroll: no The worst case is the Industries dropdown at 768px, which ends 95px clear of the right edge. `document.documentElement.scrollWidth` never exceeded the viewport width, so nothing is pushing the layout either. Closing as no change required. Note the issue's own wording — 'may clip or push' — is speculative; this is the measurement. Verify: open the Services or Industries dropdown at a 768px viewport and read its getBoundingClientRect(); right edge is 591 and 673 respectively, against a 768px viewport, with no ancestor having overflow other than visible.

null closed this issue

2026-08-18 03:53:10 -05:00