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