PRDCT-379: fix wide tables clipping under the TOC instead of scrolling#989
Open
Iamfle4ka wants to merge 1 commit into
Open
PRDCT-379: fix wide tables clipping under the TOC instead of scrolling#989Iamfle4ka wants to merge 1 commit into
Iamfle4ka wants to merge 1 commit 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.
|
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.
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