fix(site): stop docs tables overflowing and showing through sticky bars#40
Draft
macanderson wants to merge 1 commit into
Draft
fix(site): stop docs tables overflowing and showing through sticky bars#40macanderson wants to merge 1 commit into
macanderson wants to merge 1 commit into
Conversation
The protocol-surface conformance tables were unreadable at tablet and
phone widths: the last column was cut off with no way to scroll to it,
and table rows stayed visible through the two sticky bars as you
scrolled, reading as a ghosted second table over the real one.
Three causes, all in the docs' shared CSS:
* `html { zoom: 1.07 }` was global. Media queries are evaluated against
the unzoomed viewport, so every breakpoint fired while the layout
actually had 1/1.07 of that width to work with. At 768px the tables
overflowed by up to 59px and escaped the article, where the docs
grid's `overflow-x-clip` silently cut them off. The zoom is only
wanted for the px-authored marketing page, so it moves onto
`.marketing-page` — the marketing layout renders pixel-identically
(verified by screenshot hash at 1440 and 1024), and the docs go back
to the natural scale fumadocs is designed around.
* Long identifiers like `contextgraph-host::wire::versions_compatible`
are one unbreakable token, so they set the cell's min-content width
and pushed the table past the viewport on narrow screens even without
the zoom. Code inside table cells may now break mid-token.
* Fumadocs ships the docs header and the TOC popover bar at 80% alpha
over a backdrop blur. Against this near-monochrome palette the rows
underneath stayed legible through them. Both bars are now opaque.
Verified on the production build at 320–1512px in both colour schemes:
table overflow and article escape are 0 at every width (previously up
to 194px at 320px), and the marketing page is byte-identical.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @macanderson, you have reached your weekly rate limit of 500000 diff characters.
Please try again later or upgrade to continue using Sourcery
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
1 participant
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.
What was wrong
On
/docs/protocol-surfacethe conformance tables were unreadable at tablet and phone widths — the last column was cut off with no way to scroll to it, and table rows stayed visible through the two sticky bars while scrolling, reading as a ghosted second table overlapping the real one.Root causes
1.
html { zoom: 1.07 }was global. Media queries are evaluated against the unzoomed viewport, so every breakpoint fired while the layout actually had1/1.07of that width to work with. Measured on production:Once a table escapes the article, the docs grid's
overflow-x-clipsilently cuts it off.The zoom is only wanted for the px-authored marketing page, so it moves from
htmlonto.marketing-page.2. Unbreakable code tokens.
contextgraph-host::wire::versions_compatibleis a single token, so it set the cell's min-content width and pushed the table past the viewport on narrow screens even with the zoom removed. Code inside table cells may now break mid-token.3. Translucent sticky bars. Fumadocs ships the docs header and the TOC popover bar at
bg-fd-background/80+backdrop-blur-sm. Against this near-monochrome palette the rows underneath stayed legible through them.Verification
Run against the production build (
pnpm build && pnpm start), Chrome, 320–1512px, light and dark:pnpm lintclean,pnpm test5/5,pnpm buildclean.Note on scope
The reported symptom was reproduced at tablet/phone widths. Desktop Chrome (1280/1440) measured and screenshotted clean before this change, so if the original report was from a desktop-width window this may not be the same defect — worth a confirmation. WebKit/Safari was not tested (browser install timed out);
zoomon the root is handled differently there, so removing it should help rather than hurt.