Fix: architecture page's theme-menu dropdown clipped by nav overflow

[testtest126]

Summary

The owner reported the theme-picker on the architecture page rendering as a single clipped/misaligned box instead of a proper dropdown. Diagnosed first (read-only), confirmed root cause, now applying the fix.

Root cause: nav .wrap had overflow-x:auto (for the intentional horizontally-scrollable mobile nav) with no explicit overflow-y. 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, not just reading the source. The theme switcher's dropdown (.theme-menu, position:absolute) is a normal-flow descendant of that box, so it got clipped to the nav bar's ~48px height instead of the ~263px it needs — rendering as a single sliver overlapping the toggle button's label. Reproduced at every width tested (390/768/820/900/1280px) — it's a vertical-overflow bug, not a narrow-viewport one. Secondary symptom: between ~768–820px the nav's total content also exceeded the viewport, partially clipping the closed button at the right edge too.

Fix: split the single flex row into two containers. The section links move into a new nav .nav-links wrapper that keeps overflow-x:auto (preserving the intentional mobile scroll behavior) and gets min-width:0 (so it can actually shrink in the outer flex row). nav .wrap 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.

Verification (rendered, not just read)

• Menu opens full-height, all 7 options visible and un-clipped, at 390/768/900/1280px.
• nav .wrap now computes overflow-x/-y: visible (was auto/auto); .nav-links computes overflow-x: auto with scrollWidth 663 > clientWidth 620 at 768px — the section links still scroll horizontally, the intentional 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, PR Docs: fix ornament-pattern legibility in arabic/indian/andalus/terminal themes #191): unaffected — this change doesn't touch typography or ornament CSS.

Docs-only, not security-sensitive. Does not touch #116 or #185. No orchestrator-approval posted, nothing merged.

🤖 Generated with Claude Code

[testtest126]

Merge request: PR #196 @ 5c7222f
Verified locally: docs-only change (single file, 14 insertions/7 deletions), zero Swift/server files touched. Visual fix, verified by rendering (headless Chrome + live DOM inspection) at 390/768/900/1280px — menu opens full-height and un-clipped at every width, section links still scroll horizontally as intended, closed button no longer clipped at 768px, terminal theme legibility (PR #191) unaffected.
Security-sensitive: no
App-touching: no
Shared files: none

Fixes the theme-picker clipping bug reported on the architecture page — root cause was overflow-x:auto on nav .wrap forcing overflow-y:auto too (CSS overflow spec coupling), which clipped the theme-menu dropdown to the nav bar's height. Full diagnosis and before/after evidence in the PR description. Does not touch #116 or #185.