Desktop is the panel's width, and the guides are the only marking

Two things, both asked for after looking at it.

The tint came out. Shading the margins was meant to say "the page does not use this", and against a
white page it read as a blue background — a colour the site does not have, on the screen that exists to
show the site's colours. The two hairlines say the same thing without claiming anything.

And Desktop is fluid. `width: null` means the frame takes whatever the panel gives it, which is the
honest answer for a device that has no width: a desktop is whatever window somebody opened. 1440 was a
guess that then had to be centred and scrolled inside the panel — a page rendered at one width and
looked at inside another, with dark room either side of it.

Tablet and mobile stay pinned, because 834 and 390 are claims about real devices and pinning them is
the only way the preview can answer "what does this look like on a phone".

Fluid, the frame IS a desktop window: the site's media queries answer the panel's real width, and the
measure guides mark where the content stops in the pixels you are actually looking at.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-01 03:24:23 +01:00
co-authored by Claude Opus 5
parent d185382d84
commit cee2f5c8e2
3 changed files with 32 additions and 39 deletions
+15 -2
View File
@@ -63,8 +63,21 @@ 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 }> = {
desktop: { label: 'Desktop', width: 1440 },
/**
* `width: null` means FLUID — the frame takes whatever the panel gives it.
*
* Desktop is fluid and the other two are not, which is the honest split. Tablet and mobile are claims
* about a real device: 834 and 390 are widths a page will actually be asked to render at, and pinning
* them is the only way the preview can answer "what does this look like on a phone".
*
* There is no such width for desktop. A desktop is whatever window somebody opened, so 1440 was a
* guess that then had to be scaled to fit the panel — a page rendered at one width and shown at
* another, with the measure guides landing wherever the scale put them. Fluid, the frame IS a desktop
* window: the site's media queries answer the panel's real width and the guides mark the measure in
* the pixels you are looking at.
*/
export const DEVICES: Record<DeviceName, { label: string; width: number | null }> = {
desktop: { label: 'Desktop', width: null },
tablet: { label: 'Tablet', width: 834 },
mobile: { label: 'Mobile', width: 390 },
};