fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
pastilhas
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
Download Patch File Download Diff File Expand all files Collapse all files
web/canvas.ts
-31
View File
@@ -512,37 +512,6 @@ export function paintMeasure(document: Document): () => void {
// lines against the edges would be noise claiming to be information.
if (box.width >= (document.documentElement.clientWidth || 0) - 1) return;
/*
The margins THEMSELVES, not only the lines that bound them.
Two hairlines say where the measure ends and leave the reader to notice that the space outside is
empty. Tinting it says what that space IS: room the page is not using, which is the question
somebody widening a gutter or judging a desktop layout is actually asking. On a narrow frame there
is nothing to tint and the block below returns before drawing any of it.
*/
for (const [side, from, width] of [
['left', 0, box.left],
['right', box.right, (document.documentElement.clientWidth || 0) - box.right],
] as const) {
if (width <= 0) continue;
const margin = document.createElement('div');
margin.setAttribute(MARK, `measure-margin-${side}`);
style(margin, [
'position:fixed',
'top:0',
'bottom:0',
`left:${Math.round(from)}px`,
`width:${Math.round(width)}px`,
// Faint, because this is the part of the screen the page does NOT occupy: it has to read as
// absence. Anything stronger competes with the content for the eye.
`background:color-mix(in srgb, ${ACCENT} 7%, transparent)`,
'pointer-events:none',
'z-index:2147482999',
]);
document.body.append(margin);
guides.push(margin);
}
for (const [side, x] of [
['left', box.left],
['right', box.right],