type: claude-session · area: taiganjp · tags: auto-capture

session 2026 06 23 a1789d50

Claude Session Summary — TaiganJP mobile h-scroll fix (2026-06-23)

Auto-captured from a Claude Code session (cwd: C:\Users\Benjamin Eichhorn\Desktop\WIP). Review, then file or delete.

Fix a ~262px phantom horizontal scroll appearing on every guide page at mobile width (380px).

Decision	Rationale
Suppress the glossary tooltip at ≤640px (`@media (hover: none), (max-width: 40rem)` → display:none)	On phones there's no hover; the term's /glossary/ link is the real UI, so removing the box guarantees scrollWidth=0 regardless of how the device reports hover
Add `overflow-x: clip` backstop on `main` (not html/body)	Contains the 641–~1375px band; clip on the root only hides the scrollbar while scrollWidth still overflows; clip (not hidden) avoids breaking position:sticky

Root cause: the .jp-term::after glossary tooltip is a ~304px absolutely-positioned box anchored left:0 to an inline term; when a decorated term sits far right on a narrow line, the tooltip overflows and inflates scrollWidth even though visually clipped.
The tools-page .gloss is just a styled <a> (no ::after/data-tip) — never had the bug.
Fix lives entirely in src/styles/global.css (~line 1499 media query; ~line 206 main containment).
Verified numerically at 380/800/1280px: scrollWidth − clientWidth = 0; glossary taps still navigate; sticky nav intact. (Screenshot tool timed out, so geometry was proven programmatically.)