From ce11d79f3dc6c625e1d3a71f483cd7837a3da441 Mon Sep 17 00:00:00 2001
From: Speculator55005 <50082482+fas89@users.noreply.github.com>
Date: Mon, 14 Sep 2026 23:14:41 +0200
Subject: [PATCH] fix: a wide table made the whole page scroll sideways on a
 phone

Found by looking at the rendered site rather than the HTML.

`concepts/sovereignty.html` carries a three-column comparison of the two
sovereignty gates. At a 357px viewport it renders at its natural 595px, pushing
the document to 619px, so the ENTIRE PAGE scrolls horizontally - the classic
mobile failure where body text drifts under your thumb.

Code blocks never had this problem: the theme gives `pre` an `overflow-x: auto`,
which is why a 798px bash line sits happily inside a 307px column. Tables had no
equivalent, so nothing contained them. `cli/validate.html` is clean only because
its widest table happens to fit.

So the fix is global rather than a tweak to my table: any table in the page body
now scrolls inside its own box. `display: block` is what makes `overflow-x`
apply at all - a `display: table` box ignores it - and `width: fit-content`
keeps narrow tables at their natural size instead of stretching them.

Verified at 357px: document scrollWidth was 619 against a 357 viewport, and is
now 357 with no horizontal page scroll; the wide table reports a 309px box with
595px of content and scrolls internally.

Two measurement traps worth recording, because both nearly produced a wrong
answer:

`getBoundingClientRect` on clipped content reports the FULL width, not the
visible width. Sorting elements by their right edge therefore pointed at a code
block inside an already-scrollable `pre` - innocent - while the guilty table sat
further down the list. The honest query is "widest element with no scrollable
ancestor".

And reading a computed `transform` immediately after setting it returns the
pre-transition value. That made the skip link look as though it never revealed
on focus. It does: `transition: transform .15s`, and after settling it moves
from -46px to 0. No defect - my instrument was too fast.
---
 docs/.vuepress/styles/index.scss | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
index 8bf7d69..927d63e 100644
--- a/docs/.vuepress/styles/index.scss
+++ b/docs/.vuepress/styles/index.scss
@@ -425,3 +425,25 @@ div[class*="language-"] {
     transform: none;
   }
 }
+
+// ---------------------------------------------------------------------------
+// Wide content scrolls inside its own box; the page never scrolls sideways.
+//
+// Code blocks already do this - the theme gives `pre` overflow-x: auto, which
+// is why a 798px bash line sits happily in a 307px column. Tables had no such
+// containment: a three-column table renders at its natural 595px and pushes the
+// whole document to 619px against a 357px viewport, so the entire page scrolls
+// horizontally on a phone. Found by measuring the rendered page, not the HTML -
+// `getBoundingClientRect` on clipped code reports full width and sends you
+// after the wrong element.
+//
+// `display: block` is what makes overflow-x apply at all; a `display: table`
+// box ignores it. `width: fit-content` keeps narrow tables their natural size
+// rather than stretching them to the column.
+// ---------------------------------------------------------------------------
+.vp-page table {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+}