Grid density: cut the board finer or coarser, per browser #14

2026-09-22T10:20:18-04:00

michael commented

2026-09-22 10:20:18 -04:00

Why

Twelve columns fit a booth monitor and little else. On a 4K wall a three-wide tile is close to a thousand pixels; on a small screen four tiles across is the most the grid allows. There was no way to change either.

What

A Grid Size stepper at the top of the Layouts menu — Grid Size − 12 + — cutting the board into 8 · 10 · 12 · 16 · 20 · 24 columns. Row height follows the column width (108 / 86 / 72 / 54 / 43 / 36 px), so cells keep their shape: a 3×2 tile is still a 3×2 tile, only smaller. Finer lets tiles be smaller so more fit across; coarser suits a screen read close up. The menu stays open while you step, so the board can be watched changing behind it; the buttons carry tooltips (Coarser / Finer) and disable at the ends. The row is a name and a number — no caption, no unit.

Per browser, saved with the layout — not a server setting. Two displays at one location can want different densities. The value travels in the local layout and in named layouts on the server, so a booth's named layout comes back at the density it was arranged on — and the load message says so ("Loaded 'Dense': 3 tiles on a 24-column grid"). An older layout with no density is the default twelve.

Behaviour worth knowing

Tiles keep their grid units when the density changes; the board gets denser or coarser around them and everything on it changes size. Going coarser, a tile past the new right edge is pulled in, and one that would then sit on another tile settles into the first free spot — the rule a newly added tile follows — so the board never stacks tiles. Positions are otherwise left alone: 12→16 doesn't divide cleanly and scaling them would overlap tiles.
minSize is enforced in cells as declared, so on a finer grid a tile can be made smaller than it could at twelve — that's the fix being asked for. defaultSize is scaled to the density when a tile is added, so a new tile lands at about the size its author meant (a Now tile declared 4×2 arrives as 8×4 at 24 columns).
Fullscreen fit uses the chosen density's row height as its base. Leaving fullscreen now returns to the chosen column count — the old reset went back to the stylesheet's twelve, which predates any notion of a chosen density and would have left a 16-column layout on a 12-track grid.
Server side, sanitizeLayout keeps gridCols when it's one of the six; a value off the scale is dropped rather than stored.

Shell 1.9.0. README and module guide updated (the guide's size row now says what minSize/defaultSize mean under a chosen density).

Verified

Browser, on a scratch server:

default 12 columns / 72 px; stepping 12 → 16 → 24 gave 54 px and 36 px rows, the menu stayed open, + disabled at 24, − at 8; a 3×2 clock went 342 → 256 → 171 px wide while staying 3×2 in the layout;
12 → 8 on a full six-tile board: every tile in bounds, zero overlapping pairs (the settle rule);
a tile added at 24 columns landed at 8×4 (declared 4×2);
saved "Dense" at 24 through the real menu → server file carries gridCols: 24; stepped back to 12; loaded "Dense" → 24 columns, 36 px rows, toast names the grid; loaded an older layout with no field → back to 12;
fullscreen stubbed at 16 columns: fit rows computed from the 54 px base; on exit, 16 columns and 54 px, tiles placed;
reload comes up at the saved density;
tools/layout-roundtrip.test.js passes with the two new assertions.

🤖 Generated with Claude Code

## Why Twelve columns fit a booth monitor and little else. On a 4K wall a three-wide tile is close to a thousand pixels; on a small screen four tiles across is the most the grid allows. There was no way to change either. ## What A **Grid Size** stepper at the top of the **Layouts menu** — `Grid Size − 12 +` — cutting the board into **8 · 10 · 12 · 16 · 20 · 24** columns. Row height follows the column width (108 / 86 / 72 / 54 / 43 / 36 px), so cells keep their shape: a 3×2 tile is still a 3×2 tile, only smaller. Finer lets tiles be smaller so more fit across; coarser suits a screen read close up. The menu stays open while you step, so the board can be watched changing behind it; the buttons carry tooltips (Coarser / Finer) and disable at the ends. The row is a name and a number — no caption, no unit. **Per browser, saved with the layout — not a server setting.** Two displays at one location can want different densities. The value travels in the local layout and in named layouts on the server, so a booth's named layout comes back at the density it was arranged on — and the load message says so (*"Loaded 'Dense': 3 tiles on a 24-column grid"*). An older layout with no density is the default twelve. ## Behaviour worth knowing - **Tiles keep their grid units** when the density changes; the board gets denser or coarser around them and everything on it changes size. Going coarser, a tile past the new right edge is pulled in, and one that would then sit on another tile settles into the first free spot — the rule a newly added tile follows — so the board never stacks tiles. Positions are otherwise left alone: 12→16 doesn't divide cleanly and scaling them would overlap tiles. - **`minSize` is enforced in cells as declared**, so on a finer grid a tile can be made smaller than it could at twelve — that's the fix being asked for. **`defaultSize` is scaled to the density** when a tile is added, so a new tile lands at about the size its author meant (a Now tile declared 4×2 arrives as 8×4 at 24 columns). - **Fullscreen fit** uses the chosen density's row height as its base. Leaving fullscreen now returns to the chosen column count — the old reset went back to the stylesheet's twelve, which predates any notion of a chosen density and would have left a 16-column layout on a 12-track grid. - Server side, `sanitizeLayout` keeps `gridCols` when it's one of the six; a value off the scale is dropped rather than stored. Shell **1.9.0**. README and module guide updated (the guide's size row now says what `minSize`/`defaultSize` mean under a chosen density). ## Verified Browser, on a scratch server: - default 12 columns / 72 px; stepping 12 → 16 → 24 gave 54 px and 36 px rows, the menu stayed open, `+` disabled at 24, `−` at 8; a 3×2 clock went 342 → 256 → 171 px wide while staying 3×2 in the layout; - 12 → 8 on a full six-tile board: every tile in bounds, zero overlapping pairs (the settle rule); - a tile added at 24 columns landed at 8×4 (declared 4×2); - saved "Dense" at 24 through the real menu → server file carries `gridCols: 24`; stepped back to 12; loaded "Dense" → 24 columns, 36 px rows, toast names the grid; loaded an older layout with no field → back to 12; - fullscreen stubbed at 16 columns: fit rows computed from the 54 px base; on exit, **16 columns and 54 px**, tiles placed; - reload comes up at the saved density; - `tools/layout-roundtrip.test.js` passes with the two new assertions. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

michael added 1 commit 2026-09-22 10:20:18 -04:00

Grid density: cut the board finer or coarser, per browser 2af7ef27ba

Twelve columns fit a booth monitor and nothing else well: on a 4K wall a
three-wide tile is nearly a thousand pixels, and on a small screen four tiles
across is the most the grid allows. A stepper in the Layouts menu now cuts
the board into 8, 10, 12, 16, 20 or 24 columns. Row height follows the
column width, so cells keep their shape and a 3×2 tile is still a 3×2 tile,
only smaller — finer lets tiles be smaller so more fit, coarser suits a
screen read close up.

It is this browser's choice, not the server's: two displays at one location
can want different densities, so it saves with the layout — the local one
and a named one on the server — and a named layout comes back at the density
it was arranged on, which the load message says. An older layout with no
density is the default twelve.

Tiles keep their grid units when the density changes; the board simply gets
denser or coarser around them, and a tile now past the right edge is pulled
in. A module's minSize is enforced in cells as declared, so on a finer grid a
tile can be smaller than it could at twelve, which is the point; a new tile's
defaultSize is scaled to the density so it lands at about the size its author
meant. Leaving fullscreen goes back to the chosen density rather than the
stylesheet's twelve — that reset predates any notion of a chosen density.

Shell 1.9.0. The round-trip test carries gridCols and drops a value off the
scale.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

michael added 1 commit 2026-09-22 11:26:19 -04:00

Grid density: a coarser board settles its tiles instead of stacking them e383070a9e

Stepping the grid coarser pulled tiles past the right edge back in and
left them wherever that put them — on top of one another, which the
board never allows under a drag. Tiles now settle in reading order: one
that would land on a tile already settled takes the first free spot, the
same rule a newly added tile follows.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

michael added 1 commit 2026-09-22 11:35:35 -04:00

Grid Size: the stepper's row is a name and a number 7ca65a845f

The Layouts menu row reads "Grid Size  − 12 +": the label is the setting's
name, the readout is the bare column count, and the default/finer/coarser
caption under the label is gone. The buttons keep their tooltips.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

michael merged commit 441cfe3882 into main

2026-09-22 11:45:54 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: michael/ProdDash#14