From 5acfd5dffed04d613e1ad2678471d537c2243c87 Mon Sep 17 00:00:00 2001
From: Algis Dumbris <a.dumbris@gmail.com>
Date: Mon, 17 Aug 2026 14:00:24 +0300
Subject: [PATCH] fix(docs-site): make wide markdown tables actually scroll and
 wrap cell code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous fix assumed Infima's default table CSS provides
display:block + overflow scrolling — this Infima version ships
'display: table', on which 'overflow: auto' is inert, so wide tables
still overflowed under the right TOC (verified via live computed
styles). Scoped fix on .markdown table: display:block +
width:fit-content + max-width:100% + overflow-x:auto turns tables into
real scroll containers. Also let code tokens wrap inside cells
(pre-wrap + break-word): long JSON examples no longer starve sibling
columns into tall multi-line slivers — the telemetry table now fits
the column entirely (verified 643/643px, row height 156→79px).
---
 website/src/css/custom.css | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index f0d378e5..0c1d59fc 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -55,12 +55,24 @@
   font-size: 14px;
 }
 
-/* Tables: keep Infima's default display:block + overflow-x:auto so wide
-   tables scroll INSIDE the content column instead of sliding under the right
-   TOC (the old display:table override broke this — see the telemetry page).
-   width:100% only makes the scroll container span the column. */
-table {
-  width: 100%;
+/* Markdown tables: this Infima version sets `display: table`, on which its
+   own `overflow: auto` is inert (overflow needs a block container), so wide
+   tables blew past the content column and under the right TOC (telemetry
+   page). display:block turns the table into a real scroll container: narrow
+   tables shrink-wrap, wide ones cap at the column and scroll inside it. */
+.markdown table {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+/* Long code tokens in table cells (JSON examples, hashes) otherwise force a
+   column to its full unbroken width, starving the other columns into
+   multi-line slivers with tall rows. Let them wrap inside cells. */
+.markdown table code {
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 /* Better sidebar navigation */