the preview takes the full height

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 in View was the tell.

Media queries answer WIDTH. The layout at 390 is the phone's layout whatever the height, so a taller
frame shows more of the page rather than a different device — a scroll position, not a viewport class.
Width stays the device; height is now simply the room there is.

DEVICES carries widths only. The heights had exactly one consumer, and it was the cap.

One 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 puts it lower, exactly as a taller browser window does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

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 = {

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">