PRDCT-379: fix wide tables clipping under the TOC instead of scrolling - #989
Merged
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
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 |
jordanrburger
approved these changes
Jul 16, 2026
jordanrburger
left a comment
Contributor
There was a problem hiding this comment.
Still happening on MySQL extractor table.
jordanrburger
enabled auto-merge
July 16, 2026 15:15
Iamfle4ka
pushed a commit
that referenced
this pull request
Aug 4, 2026
Nothing checked rendering, so the wide-table display:block regression (PRDCT-379) shipped to main. Add two gates wired into the PR build: - scripts/lint-docs.mjs — content lint (broken links/anchors, bare code fences, missing title/slug/description, deprecated terms, raw HTML tables, Liquid leftovers, placeholder images). Gated via scripts/lint-baseline.json: fails only on findings not already in the baseline, so it catches regressions today without first clearing the existing backlog (1155 known findings). - scripts/check-render.mjs — headless Playwright over `astro preview`: asserts every .beacon-table-scroll > table computes display:table (catches the Starlight display:block collapse), wrapper overflow-x:auto, no horizontal body scroll at 375/768/1280, all images load, headings have ids. - package.json: `lint`, `check:render`, `audit` scripts + playwright devDep. - branch.yml: run lint + render checks after build on every PR. Verified: check-render currently flags the still-unmerged table bug on main (105 failures, all the display:block table); applying the PRDCT-379 fix locally makes it pass. Merge order: PRDCT-379 (#989) first, then this. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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