diff --git a/web/ViewMode.tsx b/web/ViewMode.tsx
index 0f91637..d5fb6b6 100644
--- a/web/ViewMode.tsx
+++ b/web/ViewMode.tsx
@@ -25,6 +25,10 @@ export type DeviceName = 'desktop' | 'tablet' | 'mobile';
 /**
  * The widths a preview is rendered at, and why these numbers.
  *
+ * Widths ONLY. There were heights too, and they were wrong: media queries answer width, so a frame's
+ * height changes how much page you see and never which layout you get. The preview takes whatever
+ * height the panel has.
+ *
  * They are REAL viewport sizes, and the preview is scaled down to fit rather than being given whatever
  * width the panel happens to have. That distinction is the whole point: a "Desktop" preview squeezed
  * into a 900px panel would render the site's tablet layout and call it desktop, which is precisely the
@@ -38,10 +42,10 @@ export type DeviceName = 'desktop' | 'tablet' | 'mobile';
  *   desktop 1440  — a common laptop, comfortably past the 1280 the content column caps at, so the
  *                   margins either side are visible rather than implied.
  */
-export const DEVICES: Record<DeviceName, { label: string; width: number; height: number }> = {
-  desktop: { label: 'Desktop', width: 1440, height: 900 },
-  tablet: { label: 'Tablet', width: 834, height: 1112 },
-  mobile: { label: 'Mobile', width: 390, height: 844 },
+export const DEVICES: Record<DeviceName, { label: string; width: number }> = {
+  desktop: { label: 'Desktop', width: 1440 },
+  tablet: { label: 'Tablet', width: 834 },
+  mobile: { label: 'Mobile', width: 390 },
 };
 
 type ViewModeValue = {
diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index 98a6b5b..069c3f8 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -299,7 +299,7 @@ const LayoutPreview = ({ port }: { port: number | null }) => {
   clientRef.current = client;
 
   const { device, mode } = useViewMode();
-  const { width, height } = DEVICES[device];
+  const { width } = DEVICES[device];
 
   const [ready, setReady] = useState(false);
   const [failed, setFailed] = useState<string | null>(null);
@@ -355,16 +355,17 @@ const LayoutPreview = ({ port }: { port: number | null }) => {
   const scale = available.width ? Math.min(1, available.width / width) : 1;
 
   /*
-    Whatever room is left, capped at the device's own height.
+    All the room there is. WIDTH is the device; height is just how much of the page you can see.
 
-    The cap matters: a 390x844 phone in a 1200px-tall panel would otherwise be drawn as a phone 1200
-    pixels tall, which is not a phone. Past its real height the frame stops growing and the space stays
-    empty, which is honest — there is no device that shape.
+    It was capped at the device's own height, on the reasoning that a 390x844 phone drawn 1200 pixels
+    tall is not a phone. That was wrong, and the empty band under the preview was the tell: media
+    queries answer WIDTH, so the layout at 390 is the phone's layout whatever the height. A taller frame
+    shows more page, which is a scroll position rather than a different device.
 
-    It was a fixed 420px band in Edit. That made the preview a letterbox in the mode where changes are
-    being made, and left empty panel below the controls.
+    One real consequence, and it is the right one: the footer is `min-h-dvh`, so it sits at the bottom
+    of the FRAME. A taller frame therefore puts it lower — exactly as a taller browser window does.
   */
-  const shownHeight = Math.max(0, Math.min(available.height, height * scale));
+  const shownHeight = Math.max(0, available.height);
 
   return (
     <section className="flex min-h-0 flex-1 flex-col gap-2">