fix: a wide table made the whole page scroll sideways on a phone - #123
Merged
Merged
Conversation
Found by looking at the rendered site rather than the HTML. `concepts/sovereignty.html` carries a three-column comparison of the two sovereignty gates. At a 357px viewport it renders at its natural 595px, pushing the document to 619px, so the ENTIRE PAGE scrolls horizontally - the classic mobile failure where body text drifts under your thumb. Code blocks never had this problem: the theme gives `pre` an `overflow-x: auto`, which is why a 798px bash line sits happily inside a 307px column. Tables had no equivalent, so nothing contained them. `cli/validate.html` is clean only because its widest table happens to fit. So the fix is global rather than a tweak to my table: any table in the page body now scrolls inside its own box. `display: block` is what makes `overflow-x` apply at all - a `display: table` box ignores it - and `width: fit-content` keeps narrow tables at their natural size instead of stretching them. Verified at 357px: document scrollWidth was 619 against a 357 viewport, and is now 357 with no horizontal page scroll; the wide table reports a 309px box with 595px of content and scrolls internally. Two measurement traps worth recording, because both nearly produced a wrong answer: `getBoundingClientRect` on clipped content reports the FULL width, not the visible width. Sorting elements by their right edge therefore pointed at a code block inside an already-scrollable `pre` - innocent - while the guilty table sat further down the list. The honest query is "widest element with no scrollable ancestor". And reading a computed `transform` immediately after setting it returns the pre-transition value. That made the skip link look as though it never revealed on focus. It does: `transition: transform .15s`, and after settling it moves from -46px to 0. No defect - my instrument was too fast.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Found by looking at the rendered site in a browser, not at the HTML.
concepts/sovereignty.htmlcarries a three-column comparison of the two sovereignty gates. At a 357px viewport it renders at its natural 595px, pushing the document to 619px — so the entire page scrolls horizontally, the classic mobile failure where body text drifts under your thumb as you scroll.Why it was only this page
Code blocks never had the problem: the theme gives
preanoverflow-x: auto, which is why a 798px bash line sits happily inside a 307px column. Tables had no equivalent containment anywhere in the site.cli/validate.htmlis clean only because its widest table happens to fit.So the fix is global rather than a tweak to one table: any table in the page body now scrolls inside its own box.
display: blockis what makesoverflow-xapply at all — adisplay: tablebox ignores it — andwidth: fit-contentkeeps narrow tables at their natural size instead of stretching them to the column.Two measurement traps, recorded because both nearly gave the wrong answer
getBoundingClientRecton clipped content reports the full width, not the visible width. Sorting elements by their right edge pointed straight at a code block sitting inside an already-scrollablepre— innocent. The guilty table was further down the list. The honest query is "widest element with no scrollable ancestor".Reading a computed
transformimmediately after setting it returns the pre-transition value. That made the new skip link look as though it never revealed on focus — twice. It works:transition: transform .15s, and after settling it moves from-46pxto0and back. No defect; my instrument was simply faster than the animation.Also verified in the browser while there
0.15.0release banner replaced the stale0.12.0block