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 ? (