PRDCT-379: fix wide tables clipping under the TOC instead of scrolling#989
Open
Iamfle4ka wants to merge 3 commits into
Open
PRDCT-379: fix wide tables clipping under the TOC instead of scrolling#989Iamfle4ka wants to merge 3 commits into
Iamfle4ka wants to merge 3 commits into
Conversation
Site-wide CSS render bug, independent of the Diátaxis revamp. Two causes:
1. Wrapped markdown tables couldn't scroll — the base rule `table { width:100% }`
pinned them, so wide content compressed/clipped instead of overflowing the
`.beacon-table-scroll` wrapper. Fix: wrapper > table uses `width: max-content;
min-width: 100%` (narrow tables still fill; wide ones grow → wrapper scrolls).
2. Raw HTML <table> blocks aren't wrapped at all (the remark pass only catches
mdast table nodes, and hand-written tables split across HTML nodes). Fix: a
CSS fallback makes any unwrapped, non-spec, non-status table
`display: block; overflow-x: auto`.
Verified in a production build at 1280px and 600px on array-splitter (narrow
markdown — still full-width, no regression), the Transformations index
"Other features" HTML table (fallback), and the MySQL connector page (7 wide
markdown tables, content up to 2948px) — all scroll, none overflow the viewport.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
jordanrburger
requested changes
Jun 29, 2026
jordanrburger
left a comment
jordanrburger
left a comment
Contributor
There was a problem hiding this comment.
Still happening on MySQL extractor table.
…splay:table The .beacon-table-scroll wrapper left narrow tables shrunk to content width and left-packed, with empty space on the right, because Starlight defaults tables to display:block (its own scroll mechanism) and width:max-content then sized the table to its content instead of the wrapper. Force real table layout on wrapped tables: display:table + width:100%. Cells wrap normally and fill the wrapper; a table whose content genuinely can't fit exceeds the wrapper and the wrapper (overflow-x:auto) scrolls — so wide tables still scroll instead of clipping under the TOC, and narrow tables no longer leave an empty box. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Collaborator
Author
|
Fixed in b5def60 (pushed after your review): wrapped tables were collapsing to |
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
2 participants
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.
Fixes a site-wide CSS render bug where wide tables get clipped on the right (under the "On this page" panel) instead of scrolling. Independent of the Diátaxis revamp; CSS-only change to
src/styles/custom.css.Root cause (two issues)
.beacon-table-scroll { overflow-x:auto }, but the base ruletable { width:100% }pinned the table to the wrapper width — so wide content compressed/clipped instead of overflowing and triggering the scroll.<table>blocks aren't wrapped at all — the remark pass only matches mdasttablenodes, and hand-written tables can split across several HTML nodes, so they stay unwrapped (e.g. the Transformations index "Other features" table).Fix (
custom.css).beacon-table-scroll > table→width: max-content; min-width: 100%(narrow tables still fill the column; wide ones grow so the wrapper scrolls).display: block; overflow-x: auto.Verification (production build, viewports 1280px + 600px)
r-plain/array-splittertransformations/components/extractors/database/mysqlNo table overflows the viewport at any tested width; build clean (254 pages). AC met: wide tables scroll/wrap at all viewport widths, no horizontal clipping.
🤖 Generated with Claude Code