From 6a1e08aa746298441087a19c86b79f4ef2392648 Mon Sep 17 00:00:00 2001
From: Justin Visser <justinfvisser@gmail.com>
Date: Sat, 27 Jun 2026 17:00:04 +0200
Subject: [PATCH] web: widen Method page and clear its table scrollbar

Two visual fixes to MethodPage.vue, from the deployed page.

Width: the content container was 820px and felt cramped. Raise it to
1080px so the page uses more of the viewport and the sources table has
room, while capping the running prose (lede, ODD blocks, section intros,
strategies, references, closing) at a 760px reading measure so line length
stays comfortable. The table and section rules span the full container.

Scrollbar: the sources table's horizontal scrollbar overlapped the last
row's text. Reserve a strip with padding-bottom: 14px inside the
overflow-x:auto container so the scrollbar sits clear of the content, and
style it thin and themed (scrollbar-width / -color, plus a webkit fallback)
in both themes. Verified on a local prod build at desktop width and 390px.
---
 web/src/components/MethodPage.vue | 33 +++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MethodPage.vue b/web/src/components/MethodPage.vue
index f2f8111..ced763d 100644
--- a/web/src/components/MethodPage.vue
+++ b/web/src/components/MethodPage.vue
@@ -414,9 +414,23 @@ const references: Reference[] = [
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  max-width: 820px;
+  max-width: 1080px;
   margin: 0 auto;
-  padding: 8px 2px 56px;
+  padding: 8px 4px 56px;
+}
+
+/* The container is wide so the page breathes and the sources table has room,
+   but running prose keeps a comfortable reading measure rather than stretching
+   to the full width. The table, references, and section rules still span the
+   full container. */
+.lede,
+.block,
+section > h2,
+section > .sub,
+.strategies,
+.refs,
+.closing {
+  max-width: 760px;
 }
 
 .lede {
@@ -536,8 +550,23 @@ code {
 .table-scroll {
   margin-top: 16px;
   overflow-x: auto;
+  /* Keep the horizontal scrollbar clear of the last row instead of letting it
+     overlap the text; the scrollbar renders in this reserved strip. */
+  padding-bottom: 14px;
   border: 1px solid var(--border);
   border-radius: 14px;
+  /* A thin, themed scrollbar that stays inside the reserved strip. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ink-4) transparent;
+}
+
+.table-scroll::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-scroll::-webkit-scrollbar-thumb {
+  background: var(--ink-4);
+  border-radius: 999px;
 }
 
 table {