From c9e946571130acbc66e18d8106ad8e6940a8d940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Mon, 31 Aug 2026 05:07:02 +0100
Subject: [PATCH] the preview's scrollbars stop taking width from the frame
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A classic scrollbar — Linux, Windows — is laid out INSIDE the element, so it takes width from the
frame. The preview then shows less than the device width it claims to be, and at tablet the last menu
item ran off the edge of a page that fits perfectly well at 834.

It cascades, too: a horizontal bar costs height, which can force a vertical bar, which costs more
width, which is how a page that fits ends up not fitting.

Hidden with the same trick the site uses in its own stylesheet, for the same reason. The cost is the
same and worth stating: wheel, trackpad and touch still scroll, and what goes is the visual position
indicator on the platforms where scrollbars are always classic.

Found by looking for a fixed gap between the menu items that turned out not to exist — the nav has no
horizontal gap at all, and justify-between was already doing exactly what it should.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/SitePreview.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/SitePreview.tsx b/web/SitePreview.tsx
index f2c4949..5774c10 100644
--- a/web/SitePreview.tsx
+++ b/web/SitePreview.tsx
@@ -258,9 +258,21 @@ export const SitePreview = ({
       <div ref={box} className="min-h-0 flex-1">
         <div
           ref={scroller}
-          // `overflow-auto`, not hidden: at Desktop in a narrow panel the frame is wider than the room,
-          // and scrolling to the rest of it is the honest answer where scaling was not.
-          className="mx-auto overflow-auto rounded-lg border border-border bg-white"
+          /*
+            `overflow-auto`, not hidden: at Desktop in a narrow panel the frame is wider than the room,
+            and scrolling to the rest of it is the honest answer where scaling was not.
+
+            THE SCROLLBARS ARE HIDDEN, and that is not cosmetic. A classic scrollbar — Linux, Windows —
+            is laid out INSIDE the element, so it takes width from the frame: the preview then shows
+            less than the device width it claims to be, and the last menu item runs off the edge. Worse,
+            it cascades: a horizontal bar costs height, which can force a vertical bar, which costs more
+            width.
+
+            The same trade the site makes in its own stylesheet, for the same reason and with the same
+            cost: wheel, trackpad and touch still scroll, and the visual position indicator is gone on
+            the platforms where scrollbars are always classic.
+          */
+          className="mx-auto overflow-auto rounded-lg border border-border bg-white [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           style={{ width: Math.min(width, available.width || width), height: shownHeight }}
         >
           {message ? (