From 5c7222fbddaf1d07757c3b2bb9426b7b6084a55d Mon Sep 17 00:00:00 2001 From: testtest126 <44771568+testtest126@users.noreply.github.com> Date: Sat, 18 Jul 2026 11:54:40 +0200 Subject: [PATCH] Fix: architecture page's theme-menu dropdown clipped by nav overflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause: nav .wrap had overflow-x:auto (for the horizontally-scrollable mobile nav) with no explicit overflow-y -- but per the CSS overflow spec, setting overflow-x to anything but visible forces the browser to compute overflow-y as auto too (confirmed via getComputedStyle: overflowY was "auto" despite no rule ever setting it). The theme switcher's dropdown (.theme-menu, position:absolute, anchored to .theme-switcher{position: relative}) is a normal-flow descendant of that box, so it got clipped to the nav bar's ~48px height -- the ~263px option list rendered as a single sliver overlapping the toggle button's own label. Reproduced at every width tested (390/768/820/900/1280px); it's a vertical-overflow bug, not a narrow-viewport one. A secondary, width-dependent symptom: between roughly 768-820px the nav's total content (811px) exceeded the viewport, partially clipping the closed button itself at the right edge. Fix: split the single flex row into two containers. The section links (brand + .sec) move into a new nav .nav-links wrapper that keeps its own overflow-x:auto (preserving the intentional mobile horizontal-scroll behavior for the links) and min-width:0 (so it can actually shrink inside the outer flex row). nav .wrap itself drops overflow-x:auto entirely and becomes a plain 2-child flex row: .nav-links and .theme-switcher. The switcher is no longer a descendant of any overflow:auto box, so its dropdown renders at full height. No JS touched; the switcher's existing anchoring (top:calc(100% + .5rem); right:0) is unchanged and still works. Verified by rendering (headless Chrome + live DOM inspection), not just reading the source: - Menu opens full-height, all 7 options visible, at 390/768/900/1280px. - nav .wrap computes overflow-x/-y: visible (was auto/auto); .nav-links computes overflow-x: auto with scrollWidth 663 > clientWidth 620 at 768px -- the links still scroll internally, confirming the mobile behavior wasn't lost. - Closed button at 768px: right edge now within the wrap's bounds (previously clipped ~19px past it). - Spot-checked the terminal theme (recent --bone-faint legibility work): unaffected, still legible, nav restructure doesn't touch typography/ ornament CSS. 🤖 Generated with Claude Code Co-authored-by: Claude Sonnet 5 --- docs/architecture/index.html | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/docs/architecture/index.html b/docs/architecture/index.html index 0de54b7..c23f45c 100644 --- a/docs/architecture/index.html +++ b/docs/architecture/index.html @@ -194,7 +194,12 @@ /* ---------- nav ---------- */ nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)} -nav .wrap{display:flex;align-items:baseline;gap:22px;padding-top:11px;padding-bottom:11px;overflow-x:auto} +nav .wrap{display:flex;align-items:baseline;gap:22px;padding-top:11px;padding-bottom:11px} +/* the section links scroll horizontally on narrow widths; the theme switcher sits outside + this box on purpose so its open dropdown is never clipped by an overflow:auto ancestor + (overflow-x:auto forces overflow-y to auto too -- that clipped the whole menu, not just + the links) */ +nav .nav-links{display:flex;align-items:baseline;gap:22px;overflow-x:auto;min-width:0} nav .brand{font-family:var(--serif);font-weight:700;font-size:16px;white-space:nowrap;color:var(--ink);text-decoration:none} nav .brand .kn{color:var(--accent)} nav a.sec{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;text-decoration:none; @@ -509,12 +514,14 @@