From 357f591f6a63297ada473b744f9db912c6e79628 Mon Sep 17 00:00:00 2001 From: Nikita Date: Thu, 25 Jun 2026 00:06:11 +0200 Subject: [PATCH] PRDCT-379: fix wide tables clipping under the TOC instead of scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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 --- src/styles/custom.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/styles/custom.css b/src/styles/custom.css index febb0a597..9a24ea209 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -1336,9 +1336,23 @@ nav.sidebar { margin: 0; border: 0; border-radius: 0; + /* Grow to content so wide tables overflow the wrapper and it scrolls; + min-width keeps narrow tables full-width. The base rule's width:100% + otherwise pins the table and wide content gets clipped instead. */ + width: max-content; min-width: 100%; } +/* Fallback for raw HTML
blocks: the markdown table-scroll wrapper only + catches mdast table nodes, and hand-written
markup can split across + several HTML nodes, so it stays unwrapped. Make any unwrapped, non-spec, + non-status table scroll on its own instead of clipping under the TOC. */ +.sl-markdown-content + table:not(.beacon-spec-table):not(.beacon-status-table):not(:where(.beacon-table-scroll *)):not(:where(.not-content *)) { + display: block; + overflow-x: auto; +} + /* Instant view transitions */ ::view-transition-old(root), ::view-transition-new(root) {