Dress Up reports · ^du_report(16) · 2026-10-21 · about Messed Up Dress Up, a game made with M and N · after ^du_report(15)
The Space Between the Boxes
About 12 minutes to read (2,910 words, not counting tables and figures).
Every panel is boxed now. How much of each panel is empty, between its boxes and inside them, at the screens and zoom levels the game is played on? Where does that space come from, and how much can the layout give back without hiding what a player uses? The follow-up to ^du_report(5), “Always Be Knolling”, from ^ticket(521). Matthew, 2026-10-21 14:00: “The prior effort created panels that leave a lot of "whitespace" between them in common zoom levels and screen sizes. Do an audit of that for the new report, and try to reduce that (before vs after) with a PR that we plan to merge with improvements.”
Short answers. Measured in Chrome on GitHub's computers by knoll521, three jobs each measuring the builds side by side ([3]); “empty between boxes” is the share of a panel covered by no box and no loose control or text, the mean over every tab and place measured.
- Full screen is where the space is. At 1920×1080, main (0.0.405) leaves 62.3% of the boxes' side of the full screen empty between boxes; after
c10, 53.3%. At 0.0.204 only 🎵 Music and 🗺️ World design had a full screen (37.8%); on those two alone, main reads 44.0% and after 44.0%. - The side panel is less empty than at 0.0.204, and less again after. Side panel 1920×1080: 43.7% at 0.0.204, 37.7% on main, 27.1% after. At 1366×768: 37.8%, 27.9%, 21.9%. iPad portrait full screen: 26.6%, 30.4%, 21.2%.
- Where it comes from (read in the code, and seen in the box maps of Figure 3): empty columns (a grid of 4 columns holding 1 or 2 boxes), the hole under a short box beside a tall one, and the game's card in full screen, which left its column mostly empty. The side panel sits on the 568 px line between one and two columns at the common laptop zooms (the zoom).
- Four bugs found on the way, fixed in the branch's second commit (found); one of the fixes, Background's side panel as a grid, made that panel longer and emptier at every place measured; packing the boxes (c5) then made it shorter than on main (at 1920×1080, 2.92 → 2.65 windows tall), though with gaps between its boxes its empty share stays higher (5.7% → 19.6%) (each commit).
- The panels grew by half since
^du_report(5): 1,548 → 2,293 rows declared, 107 → 132 groups, 61 boxes planned in TAB_BOXES (none at 0.0.204). - The measure repeats. In this run (out3) 3,960 cases were measured in two jobs or more; all but 4 agree to the pixel. Those 4 are the bubble room's full screen, where the jobs differ by up to 0.02 points (672 px²): most likely because its bubbles move. Outside the bubble room the noise floor is 0.
62.3% → 53.3%
empty between boxes, full screen 1920×1080, main → after
37.7% → 27.1%
the same, side panel 1920×1080
1,548 → 2,293
rows declared, 0.0.204 → 0.0.398
3,636
cases in this page (builds × screens × tabs × modes; one job per build)
c10 (51c061686f). One run on GitHub, three jobs that agree (the answers' last point). At 0.0.204 the full screens are Music's and World design's alone.Since report 5
^du_report(5) read the game at 0.0.204 (commit 6e787a8), published 2026-10-18. It measured counts only: TABS walked and SHOWN_WHEN run in node at the defaults; no pixels, no whitespace, no zoom levels. It set out nine rules and eight steps; where each stands at main:
| report 5's rule | now | |
|---|---|---|
| 1. A box per thing, named once | kept | every boxed tab (ticket ^ticket(375)); each box says its name once since ticket ^ticket(392) |
| 2. Nesting by boxes alone, no dashed lines | partly | kept in the boxed tabs; 🗺️ World design still draws dotted borders |
| 3. Knolled: a grid, things of a kind the same size and lined up | amended | the grids line their boxes up row by row, so a short box leaves a hole as tall as its row's tallest: see #rules |
| 4. A row on one line | amended | rows of 12 or more chips still wrap to 3 or more lines: extended to chip rows, see #rules |
| 5. Show the thing | kept | places as pictures, things as cards, castle themes as flags |
| 6. One decision, one place | kept | unchanged |
| 7. Mirror the picture: every big tab a designer | kept | all 20 tabs have a full screen (5 kinds) |
| 8. The same at every scale | amended | the side panel sits on the line between one and two columns at common laptop zooms: 'every scale' now means every width and zoom |
| 9. Keep it fast | kept | guarded by tabs167 and castlefs365; this report times nothing |
| report 5's step | by | |
|---|---|---|
| 1. The shared pieces: a box, the one-line row, the designer's shell | done | ticket ^ticket(285), 0.0.211 to 0.0.214 |
| 2. 🏞️ Background as a designer | done | ticket ^ticket(285) |
| 3. The castle's themes in one place, as flags | done | ticket ^ticket(375) |
| 4. The bubble themes as three cards | done | ticket ^ticket(375); its question, one on and off per theme, not settled either way |
| 5. The house's 🧸 toys slider | done | ticket ^ticket(285) |
| 6. The other tabs, biggest first | done | ticket ^ticket(375) (12 tabs into boxes), ticket ^ticket(488) (World design's side panel, Controls) |
| 7. Tidy what the survey found stale | partly | the stale comments went with ticket ^ticket(285); not checked line by line here |
| 8. Measure the full-screen designer's speed (ticket 289) | not done | only the castle designer's, castlefs365 (ticket ^ticket(365)) |
The panels, counted the way report 5 counted them (TABS walked in node at the defaults [6]), at 0.0.204 and at 0.0.398: the same walk reproduces report 5's table at 0.0.204, but for the forest, one row more. Background: 32 → 38 places; a player sees 9 to 69 of its rows in one place (it was 7 to 50).
| tab | rows declared | groups | rows shown at the defaults | boxes now |
|---|---|---|---|---|
| 🧍 Body | 8 → 28 | 1 → 1 | 7 → 10 | 6 |
| 😀 Face | 31 → 31 | 0 → 0 | 22 → 22 | 6 |
| 👁 Eyes | 15 → 15 | 0 → 0 | 13 → 13 | 4 |
| 💇 Hair | 4 → 9 | 0 → 0 | 4 → 5 | 2 |
| 🦒 Neck, arms & legs | 12 → 16 | 0 → 0 | 11 → 15 | 4 |
| 👕 Shirt | 8 → 8 | 0 → 0 | 6 → 6 | 2 |
| 🖐 Hands | 15 → 15 | 0 → 0 | 4 → 4 | 4 |
| 👖 Pants | 6 → 6 | 0 → 0 | 3 → 3 | 2 |
| 🩱 Swim & undies | 7 → 7 | 0 → 0 | 1 → 1 | 2 |
| 👟 Feet | 8 → 8 | 0 → 0 | 4 → 4 | 3 |
| 👻 Visibility | 9 → 9 | 0 → 0 | 9 → 9 | 2 |
| 🐯 Costume | 46 → 112 | 0 → 0 | 1 → 4 | 20 |
| 👥 People | – → 1 | – → 0 | – → 1 | – |
| 🏞️ Background | 1337 → 1979 | 100 → 124 | 2 → 4 | – |
| 🎮 Controls | 22 → 27 | 6 → 7 | 22 → 27 | 4 |
| 🎵 Music | 10 → 10 | 0 → 0 | 10 → 10 | – |
| 🗺️ World design | 2 → 2 | 0 → 0 | 2 → 2 | – |
| 🔬 Inspection | 4 → 6 | 0 → 0 | 4 → 6 | – |
| ♿ Accessibility | 3 → 3 | 0 → 0 | 3 → 3 | – |
| ⚙️ Advanced | 1 → 1 | 0 → 0 | 1 → 1 | – |
How the space is measured
- A box is found by its look, not its class: a border on three sides, or a tint of its own, holding a control or text. So the same check reads 0.0.204, main and the branch.
- Empty between boxes is the share of the panel's whole length covered by no box (each widened by 4 px, so the 8 px gutter does not count) and by no loose control or text. In full screen only the boxes' side is measured, left of the split. Empty inside boxes is the share of each box's content covered by no control and no line of text (each widened by 3 px).
- Zoom by the device scale factor, as Chrome's zoom and a 125% or 150% display do: the page is laid out at the screen's size divided by the zoom, so media queries, the 568 px line and the minimum split react as on a zoomed screen. Every case asserts a 16 px root font. Screens are named in device pixels; the widths in this report are CSS pixels.
- Before and after on one machine. The workflow [4] serves every build side by side from git worktrees: 0.0.204 (job 1 only, with the screenshots), main, and every commit of the branch knoll-521 [5]; each job measures them in a different order. Commits in between are shared out across the jobs, at 4 screens. Before each load the page's saved storage is cleared.
- A self-test first: a page with a known hole, 300×196 of 600×300 = 32.7%, must read exactly that. Job 1 printed: “the instrument: a known hole (300 x 196 of 600 x 300 = 32.7%) read as such”.
- The machine: Chrome/155.0.8059.39, AMD EPYC 9V74 80-Core Processor, Ubuntu 24.04; fonts DejaVu Sans Book, Noto Color Emoji Regular. Not the kids' fonts, so this report compares builds with each other, not with what M and N see.
Where the space is now
Figure 2 shows every tab and place at every screen, main → c10: green where the branch empties less, red where more (a point or more). The three largest holes the check found under each panel are in the data, with the box above each.
Full screen
| 1280×800 | 1366×768 | 1366×768 at 125% | 1440×900 | 1440×900 at 125% | 1920×1080 | 1920×1080 at 125% | 1920×1080 at 150% | 2560×1440 at 150% | iPad landscape 1180×820 | iPad portrait 820×1180 | phone 390×844 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 🧍 Body | 31→17 | 31→20 | 31→19 | 47→26 | 30→16 | 55→54 | 49→28 | 31→17 | 47→39 | 31→17 | 29→19 | 2→2 |
| 😀 Face | 29→12 | 31→9 | 29→8 | 44→43 | 29→8 | 65→64 | 41→40 | 29→12 | 49→47 | 29→10 | 28→11 | 2→3 |
| 👁 Eyes | 49→48 | 47→45 | 24→25 | 63→62 | 39→39 | 77→76 | 62→62 | 42→42 | 71→70 | 41→41 | 27→28 | 4→5 |
| 💇 Hair | 70→70 | 71→70 | 56→56 | 78→74 | 63→63 | 87→78 | 78→73 | 66→66 | 82→76 | 67→67 | 35→37 | 7→8 |
| 🦒 Neck, arms & legs | 50→50 | 49→48 | 35→31 | 65→65 | 43→43 | 79→78 | 66→66 | 43→44 | 73→72 | 45→46 | 35→13 | 5→6 |
| 👕 Shirt | 68→68 | 67→67 | 54→54 | 80→72 | 64→64 | 88→77 | 79→71 | 64→64 | 83→74 | 65→65 | 38→38 | 6→8 |
| 🖐 Hands | 78→53 | 77→51 | 70→39 | 85→59 | 75→48 | 91→66 | 85→57 | 75→48 | 88→61 | 76→50 | 54→16 | 9→10 |
| 👖 Pants | 77→77 | 76→74 | 69→69 | 85→78 | 74→74 | 91→82 | 84→77 | 74→74 | 88→80 | 75→75 | 32→34 | 9→10 |
| 🩱 Swim & undies | 92→88 | 92→87 | 90→84 | 95→89 | 92→86 | 97→91 | 95→89 | 92→86 | 96→90 | 92→87 | 61→34 | 23→24 |
| 👟 Feet | 76→48 | 74→46 | 63→31 | 84→54 | 72→42 | 90→61 | 83→52 | 72→42 | 87→57 | 73→44 | 54→16 | 8→10 |
| 👻 Visibility | 61→60 | 59→57 | 43→43 | 74→64 | 52→52 | 84→70 | 73→62 | 55→55 | 77→66 | 54→54 | 36→37 | 5→6 |
| 🐯 Costume | 50→85 | 53→84 | 42→77 | 62→87 | 41→80 | 75→89 | 62→86 | 44→83 | 71→88 | 45→84 | 42→38 | 4→15 |
| 👥 People | 72→75 | 71→74 | 63→67 | 76→84 | 69→72 | 80→88 | 75→84 | 69→72 | 78→86 | 70→73 | 22→40 | 15→13 |
| 🏞️ Background | 71→66 | 76→64 | 62→55 | 79→70 | 68→62 | 83→75 | 78→68 | 68→62 | 81→72 | 69→63 | 16→18 | 10→11 |
| 🎮 Controls | 22→4 | 21→9 | 20→10 | 38→26 | 21→7 | 44→15 | 42→14 | 22→4 | 45→15 | 21→5 | 22→4 | 1→1 |
| 🎵 Music | 40→40 | 38→38 | 35→35 | 33→33 | 37→37 | 37→37 | 36→36 | 40→40 | 34→34 | 37→37 | 24→24 | 8→8 |
| 🗺️ World design | 51→51 | 52→52 | 56→56 | 49→49 | 53→53 | 51→51 | 50→50 | 53→53 | 54→54 | 52→52 | 33→33 | 30→31 |
| 🔬 Inspection | 90→90 | 90→90 | 85→85 | 92→92 | 88→88 | 95→95 | 92→92 | 89→89 | 94→94 | 88→88 | 79→61 | 53→45 |
| ♿ Accessibility | 74→74 | 78→77 | 65→65 | 81→81 | 71→71 | 85→84 | 81→80 | 71→71 | 83→82 | 72→72 | 32→31 | 21→18 |
| ⚙️ Advanced | 25→7 | 27→9 | 21→5 | 40→17 | 23→5 | 34→23 | 41→18 | 24→6 | 43→18 | 23→5 | 27→12 | 2→2 |
| 🏞️ Background · forest | 20→7 | 21→8 | 21→8 | 30→6 | 21→8 | 37→7 | 31→6 | 20→7 | 30→7 | 21→8 | 20→7 | 1→1 |
| 🏞️ Background · castle | 9→2 | 9→2 | 9→2 | 13→3 | 9→2 | 17→2 | 14→3 | 9→2 | 14→2 | 9→2 | 9→2 | 0→0 |
| 🏞️ Background · castleroom | 10→2 | 10→3 | 10→2 | 14→2 | 10→2 | 17→2 | 15→2 | 10→2 | 15→2 | 10→2 | 10→1 | 1→1 |
| 🏞️ Background · bubbleroom | 8→21 | 7→21 | 8→23 | 9→38 | 8→23 | 9→30 | 8→39 | 8→21 | 8→35 | 8→23 | 11→21 | 1→1 |
| 🏞️ Background · livingroom | 35→6 | 34→5 | 37→7 | 54→24 | 37→7 | 63→24 | 54→24 | 35→6 | 53→24 | 36→5 | 35→6 | 1→1 |
| 🏞️ Background · treeroom | 32→6 | 31→7 | 34→7 | 50→23 | 34→6 | 60→22 | 51→24 | 32→6 | 49→20 | 33→5 | 32→6 | 1→1 |
| 🔬 Inspection · all on | 19→17 | 16→14 | 8→7 | 32→31 | 8→7 | 52→50 | 29→28 | 9→8 | 42→40 | 8→7 | 8→7 | 3→2 |
| 🏰 castle designer | 1→1 | 1→1 | 1→1 | 1→1 | 1→1 | 1→1 | 1→1 | 1→1 | 1→1 | 1→1 | 1→1 | 0→0 |
Side panel
| 1280×800 | 1366×768 | 1366×768 at 125% | 1440×900 | 1440×900 at 125% | 1920×1080 | 1920×1080 at 125% | 1920×1080 at 150% | 2560×1440 at 150% | iPad landscape 1180×820 | iPad portrait 820×1180 | phone 390×844 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 🧍 Body | 30→18 | 30→16 | 30→18 | 28→18 | 30→18 | 47→27 | 46→20 | 30→16 | 48→24 | 30→18 | 2→2 | 2→2 |
| 😀 Face | 28→6 | 27→11 | 28→7 | 30→9 | 28→7 | 27→18 | 23→20 | 28→8 | 24→19 | 28→6 | 2→2 | 2→2 |
| 👁 Eyes | 19→20 | 27→28 | 24→20 | 27→28 | 19→20 | 51→31 | 51→29 | 23→24 | 52→30 | 24→20 | 3→4 | 4→4 |
| 💇 Hair | 30→32 | 36→37 | 33→33 | 35→36 | 30→31 | 57→36 | 55→37 | 36→37 | 53→37 | 32→33 | 5→5 | 6→6 |
| 🦒 Neck, arms & legs | 33→10 | 34→13 | 35→11 | 34→12 | 33→13 | 38→22 | 39→22 | 34→13 | 39→19 | 34→14 | 3→4 | 4→4 |
| 👕 Shirt | 38→39 | 37→38 | 38→38 | 37→38 | 38→38 | 58→42 | 58→38 | 37→38 | 59→43 | 38→38 | 5→6 | 6→7 |
| 🖐 Hands | 54→15 | 54→15 | 53→14 | 55→15 | 54→15 | 70→17 | 69→15 | 54→15 | 70→16 | 53→14 | 7→8 | 8→9 |
| 👖 Pants | 30→31 | 31→32 | 32→34 | 31→32 | 32→34 | 54→39 | 55→34 | 30→32 | 53→40 | 32→34 | 7→8 | 8→9 |
| 🩱 Swim & undies | 60→30 | 60→31 | 59→29 | 61→31 | 59→30 | 74→32 | 72→31 | 60→30 | 73→32 | 59→29 | 19→22 | 20→23 |
| 👟 Feet | 53→13 | 54→15 | 53→13 | 54→15 | 53→13 | 69→16 | 69→15 | 54→13 | 69→16 | 53→13 | 6→7 | 7→8 |
| 👻 Visibility | 30→31 | 35→36 | 30→31 | 35→36 | 30→31 | 57→35 | 53→35 | 30→31 | 53→35 | 30→31 | 4→5 | 5→6 |
| 🐯 Costume | 41→37 | 42→35 | 42→36 | 41→35 | 41→37 | 62→32 | 61→35 | 42→34 | 60→36 | 42→37 | 3→10 | 4→11 |
| 👥 People | 19→38 | 20→38 | 18→35 | 20→38 | 19→35 | 21→33 | 20→33 | 19→38 | 20→33 | 19→35 | 12→11 | 12→11 |
| 🏞️ Background | 17→20 | 18→21 | 16→19 | 22→25 | 17→20 | 24→27 | 22→26 | 18→21 | 23→26 | 16→19 | 5→6 | 6→8 |
| 🎮 Controls | 20→7 | 22→3 | 17→11 | 20→8 | 19→11 | 45→15 | 37→24 | 21→5 | 41→13 | 18→11 | 1→1 | 1→1 |
| 🎵 Music | 29→29 | 28→28 | 26→26 | 24→24 | 29→29 | 30→30 | 27→27 | 30→30 | 23→23 | 26→26 | 4→4 | 5→5 |
| 🗺️ World design | 33→33 | 38→38 | 36→36 | 37→37 | 37→37 | 43→43 | 42→42 | 38→37 | 43→43 | 32→32 | 4→4 | 6→6 |
| 🔬 Inspection | 63→56 | 68→62 | 58→50 | 59→52 | 62→54 | 70→64 | 62→55 | 66→59 | 66→60 | 60→52 | 52→44 | 50→40 |
| ♿ Accessibility | 36→30 | 37→31 | 35→29 | 39→35 | 35→29 | 38→37 | 41→36 | 36→30 | 30→36 | 35→29 | 22→16 | 23→18 |
| ⚙️ Advanced | 22→5 | 22→4 | 18→4 | 24→7 | 19→4 | 43→17 | 39→15 | 21→4 | 41→16 | 21→4 | 1→1 | 2→2 |
| 🏞️ Background · forest | 3→10 | 4→10 | 3→9 | 4→10 | 3→9 | 5→10 | 4→8 | 3→11 | 5→10 | 3→9 | 1→1 | 1→1 |
| 🏞️ Background · castle | 1→2 | 1→2 | 1→3 | 1→2 | 1→2 | 1→3 | 1→3 | 1→2 | 1→3 | 1→2 | 0→0 | 0→0 |
| 🏞️ Background · castleroom | 2→2 | 2→2 | 1→2 | 2→2 | 2→2 | 2→3 | 2→3 | 2→3 | 2→3 | 1→2 | 0→1 | 0→1 |
| 🏞️ Background · bubbleroom | 2→27 | 2→24 | 2→27 | 3→24 | 2→27 | 3→44 | 3→44 | 2→26 | 3→44 | 2→27 | 1→1 | 1→1 |
| 🏞️ Background · livingroom | 2→8 | 2→7 | 1→9 | 2→8 | 2→9 | 2→25 | 2→28 | 2→6 | 2→28 | 1→9 | 0→1 | 0→1 |
| 🏞️ Background · treeroom | 2→8 | 2→7 | 2→9 | 2→8 | 2→8 | 3→25 | 2→29 | 2→6 | 2→28 | 2→9 | 0→1 | 0→1 |
| 🔬 Inspection · all on | 16→5 | 22→7 | 14→5 | 15→7 | 15→5 | 26→8 | 19→7 | 19→6 | 23→8 | 14→5 | 4→2 | 5→3 |
| 🏰 castle designer | · | · | · | · | · | · | · | · | · | · | · | · |
🧍 Body, full screen, 1920×1080
55.4% empty · 1161×1104 px · 7 boxes · 4 columns
54.0% empty · 1161×1064 px · 7 boxes · 4 columns
🧍 Body, side panel, 1920×1080
47.0% empty · 1087×1102 px · 7 boxes · 3 columns
27.1% empty · 1087×798 px · 7 boxes · 3 columns
😀 Face, full screen, 1920×1080
65.5% empty · 1161×1104 px · 6 boxes · 4 columns
64.2% empty · 1161×1064 px · 6 boxes · 4 columns
😀 Face, side panel, 1920×1080
26.6% empty · 1102×662 px · 6 boxes · 3 columns
17.8% empty · 1102×594 px · 6 boxes · 3 columns
🎮 Controls, full screen, 1920×1080
44.1% empty · 1161×1882 px · 4 boxes · 4 columns
15.4% empty · 1161×1424 px · 4 boxes · 4 columns
🎮 Controls, side panel, 1920×1080
45.3% empty · 1087×2118 px · 4 boxes · 3 columns
15.3% empty · 1087×1662 px · 4 boxes · 3 columns
🖐 Hands, full screen, 1920×1080
91.1% empty · 1161×1104 px · 1 boxes · 4 columns
65.5% empty · 448×1064 px · 1 boxes · 1 columns
🖐 Hands, side panel, 1920×1080
69.6% empty · 1102×397 px · 1 boxes · 3 columns
16.8% empty · 1102×298 px · 1 boxes · 3 columns
🏞️ Background · castle, full screen, 1920×1080
16.8% empty · 1161×6506 px · 6 boxes · 4 columns
2.1% empty · 1161×5640 px · 6 boxes · 2 columns
🏞️ Background · castle, side panel, 1920×1080
1.2% empty · 1087×5480 px · 6 boxes
2.8% empty · 1087×5325 px · 6 boxes · 2 columns
😀 Face, full screen, 1920×1080
🎮 Controls, full screen, 1920×1080
🧍 Body, side panel, 1366×768
😀 Face, full screen, iPad portrait
The side panel and the zoom
The side panel's boxes go to two columns at 568 px. At the screens measured the side panel is this wide, in CSS pixels (😀 Face, main), and Face's boxes stand in this many columns:
😀 Face, side panel, 1920×1080
26.6% empty · 1102×662 px · 6 boxes · 3 columns
17.8% empty · 1102×594 px · 6 boxes · 3 columns
😀 Face, side panel, 1920×1080 at 125%
23.2% empty · 857×671 px · 6 boxes · 3 columns
19.7% empty · 857×642 px · 6 boxes · 3 columns
😀 Face, side panel, 1920×1080 at 150%
27.9% empty · 703×1020 px · 6 boxes · 2 columns
8.1% empty · 703×802 px · 6 boxes · 2 columns
Full screen: empty columns and the game's card
In the generic full screen the boxes' grid kept a column per 287 px whether it had boxes for them or not; the game's card on the right kept its picture's element at a fixed size, letterboxed. Figure 6 is the drawing's size in 😀 Face's full screen.
Inside the boxes
| summed over every tab and place, main (0.0.405) → c10 | 1920×1080 full | 1920×1080 side | 1366×768 side | iPad portrait 820×1180 full |
|---|---|---|---|---|
| empty inside boxes (mean) | 40.4% → 43.8% | 41.6% → 46.8% | 38.4% → 41.7% | 40.0% → 43.4% |
| labels on a line of their own | 155 → 134 | 126 → 105 | 126 → 120 | 155 → 149 |
| of them, chips that would fit beside | 32 → 32 | 45 → 39 | 35 → 34 | 35 → 40 |
| chip rows ending in a single chip | 76 → 81 | 29 → 36 | 48 → 65 | 91 → 91 |
| rows of 12+ chips on 3+ lines | 23 → 14 | 17 → 8 | 30 → 21 | 35 → 26 |
Each commit, measured
The branch knoll-521, commit by commit; each bar is the change in the mean empty share between boxes from the commit before (main for the first). The tabs reached are those with a case that moved by half a point or more.
| commit | tabs | reached | ||
|---|---|---|---|---|
c1 | e29380c1cb | Dress Up: measure the whitespace of every panel, at common screens and zooms (ticket 521) | 0 | none |
c2 | c60a9f3195 | Dress Up: four panel bugs the whitespace audit found (ticket 521) | 18 | ♿ Accessibility, 🏞️ Background · bubbleroom, 🏞️ Background · castle, 🏞️ Background · castleroom, 🏞️ Background · forest, 🏞️ Background · livingroom, 🏞️ Background · treeroom, 🐯 Costume, 👁 Eyes, 👕 Shirt, 👥 People, 👻 Visibility, 💇 Hair, 🔬 Inspection, 🔬 Inspection · all on, 😀 Face, 🦒 Neck, arms & legs, 🧍 Body |
c3 | 162d9bd340 | Dress Up: no empty columns beside the boxes (ticket 521) | 9 | 🏞️ Background, 🐯 Costume, 👕 Shirt, 👖 Pants, 👟 Feet, 👻 Visibility, 💇 Hair, 🖐 Hands, 🩱 Swim & undies |
c4 | 19ece40191 | Dress Up: no empty cell in the background designer, and the picture fills the card --n leaves (ticket 521) | 6 | 🏞️ Background · bubbleroom, 🏞️ Background · castle, 🏞️ Background · castleroom, 🏞️ Background · forest, 🏞️ Background · livingroom, 🏞️ Background · treeroom |
c5 | 8b35cb8d61 | Dress Up: the boxes packed, no hole under a short one (ticket 521) | 21 | ⚙️ Advanced, 🎮 Controls, 🏞️ Background, 🏞️ Background · bubbleroom, 🏞️ Background · castle, 🏞️ Background · castleroom, 🏞️ Background · forest, 🏞️ Background · livingroom, 🏞️ Background · treeroom, 🐯 Costume, 👁 Eyes, 👕 Shirt, 👖 Pants, 👟 Feet, 👻 Visibility, 💇 Hair, 🖐 Hands, 😀 Face, 🦒 Neck, arms & legs, 🧍 Body, 🩱 Swim & undies |
c6 | 20a2e5ee36 | Dress Up: a short chip row beside its label in a wide box (ticket 521) | 0 | none |
c7 | 2d0e737afd | Dress Up: the chip-row rule without :has() inside :has(), and the check's exact box width (ticket 521) | 12 | 🏞️ Background · castleroom, 🏞️ Background · forest, 🏞️ Background · treeroom, 👁 Eyes, 👕 Shirt, 👖 Pants, 👟 Feet, 👻 Visibility, 💇 Hair, 🖐 Hands, 😀 Face, 🧍 Body |
c8 | 6f501c7bfb | Dress Up: a long choice is one chip, and no dropdowns: ticket 459's chip box (ticket 521) | 3 | 🏞️ Background · livingroom, 🏞️ Background · treeroom, 🐯 Costume |
c9 | c1047ac0bf | Dress Up: 👥 People in boxes, as every tab (ticket 521) | 1 | 👥 People |
c10 | 51c061686f | Dress Up: reflect's follow chip names a part when the followed one is gone (ticket 521) | 0 | none |
The largest moves, case by case (a tab or place, at one screen, in one mode), against the commit before:
c2: 11 cases fall by 5 points or more, the most 🔬 Inspection · all on (1920×1080, side: 26.0% → 8.0%, 628 → 627 px long); 🔬 Inspection (iPad portrait 820×1180, full screen: 78.6% → 61.4%, 402 → 223 px long); 🔬 Inspection · all on (1366×768, side: 21.7% → 6.7%, 779 → 707 px long); 22 rise by 5 points or more, the most 🏞️ Background · livingroom (1920×1080 at 125%, side: 2.0% → 56.1%, 2,923 → 5,874 px long); 🏞️ Background · livingroom (1920×1080, side: 2.5% → 55.3%, 2,575 → 4,733 px long); 🏞️ Background · treeroom (1920×1080 at 125%, side: 2.4% → 53.8%, 2,673 → 4,918 px long).c3: 41 cases fall by 5 points or more, the most 🖐 Hands (1920×1080, side: 69.6% → 14.6%, 397 → 314 px long); 👟 Feet (1920×1080, side: 69.3% → 14.6%, 441 → 314 px long); 🖐 Hands (1920×1080 at 125%, side: 68.8% → 14.2%, 441 → 314 px long); 0 rise by 5 points or more.c4: 12 cases fall by 5 points or more, the most 🏞️ Background · forest (1920×1080, full screen: 37.0% → 22.4%, 2,083 → 1,842 px long); 🏞️ Background · forest (1920×1080 at 125%, side: 37.2% → 25.6%, 1,895 → 1,663 px long); 🏞️ Background · treeroom (1920×1080, full screen: 59.8% → 48.8%, 4,990 → 3,940 px long); 0 rise by 5 points or more.c5: 60 cases fall by 5 points or more, the most 🎮 Controls (1920×1080, side: 45.3% → 15.3%, 2,118 → 1,662 px long); 🎮 Controls (1920×1080, full screen: 44.1% → 15.4%, 1,882 → 1,424 px long); 🎮 Controls (1920×1080 at 125%, full screen: 41.9% → 14.3%, 2,271 → 1,776 px long); 0 rise by 5 points or more.c7: 3 cases fall by 5 points or more, the most 👟 Feet (1366×768, full screen: 53.4% → 45.5%, 752 → 752 px long); 👟 Feet (1920×1080 at 125%, full screen: 58.7% → 51.6%, 848 → 848 px long); 👟 Feet (1920×1080, full screen: 67.0% → 61.4%, 1,064 → 1,064 px long); 0 rise by 5 points or more.c8: 18 cases fall by 5 points or more, the most 🏞️ Background · livingroom (1920×1080 at 125%, full screen: 50.6% → 24.2%, 5,352 → 2,016 px long); 🏞️ Background · livingroom (1920×1080, side: 51.2% → 25.3%, 4,341 → 1,617 px long); 🏞️ Background · livingroom (1920×1080 at 125%, side: 53.0% → 27.7%, 5,485 → 1,909 px long); 4 rise by 5 points or more, the most 🐯 Costume (1366×768, full screen: 52.5% → 84.4%, 752 → 752 px long); 🐯 Costume (1920×1080 at 125%, full screen: 60.6% → 86.2%, 848 → 848 px long); 🐯 Costume (1920×1080, full screen: 68.5% → 88.9%, 1,064 → 1,064 px long).c9: 0 cases fall by 5 points or more; 6 rise by 5 points or more, the most 👥 People (1366×768, side: 19.7% → 37.9%, 282 → 336 px long); 👥 People (iPad portrait 820×1180, full screen: 21.5% → 39.8%, 291 → 344 px long); 👥 People (1920×1080 at 125%, side: 20.0% → 33.0%, 282 → 220 px long).
Not every commit empties less everywhere. The commit that gave 🏞️ Background's side panel a grid with gaps (the fourth of the four bugs) made the side panel of every place measured both longer and much emptier, as the list above shows; most likely because, two to a row, a short box stands beside a long one, the hole that packing the boxes is meant to fill.
Report 5's rules, amended
- Rule 3, split. Things of a kind stay in rows (cards, theme cards, music cards, mixer strips, the castle designer's rooms, the world's order); different things, the boxes of a tab, are packed, each under the one above it, with no hole under a short one.
- Rule 4, extended. A row of chips is a row too: a short row of chips (8 or fewer) sits beside its label in a box wide enough, and a row that would take 3 lines or more is a chip box (the next rule).
- Rule 8, made exact. The same at every width and zoom: the measure is the side panel at 1366x768 and 1920x1080 at 100%, 125% and 150%, the iPad both ways, and the phone, as tools/checks/knoll521.mjs measures it.
- New: no empty column. A grid has no more columns than boxes; what a full screen does not need for boxes, the game's card takes.
- New: a long choice is one chip. Twelve or more text choices are one chip naming the current one, opening ticket
^ticket(459)'s chip box (✖ and Escape close it); no dropdowns.
Found on the way
- fitPic did not know the generic full screen's card. 21-size-and-divider.js: in the 17 generic full screens the picture was not fitted to its card, so it was letterboxed (Figure 6). Fixed in the PR, the commit named "four panel bugs".
- The bubble room's settings landed in a box named "🏰 the castles". 22-full-screen.js: the test picking the castles' box matched "room"; now it picks keys and groups that start with "castle". Same commit.
- 🔬 and ♿ stopped laying their switches out as chips. style.css: the rules for 🔬 Inspection's and ♿ Accessibility's chips did not reach through the designer's wrapper, one version after they shipped (0.0.315). Same commit.
- Background's side panel had boxes but no grid. the boxes touched, with no gap between them; now a grid with the box gap, two to a row from 568 px. Same commit.
- The bubble room's full screen is not the same twice. the only case where the three jobs differ (Figure 2's note): most likely because its bubbles move and the measure catches them in different places (not confirmed). Every other case, in every build, agrees to the pixel.
What next
- 1. The default split (c4's card): Show Matthew before and after pictures of the full screen with the game's card filling its column, and ask for his word on the default split, before that commit is built (ticket
^ticket(521)). - 2. The PR: Run all the checks on knoll-521, then open the PR with this report's before and after; merging and releasing wait for Matthew.
- 3. The tab strip: Measure and shorten the 20-tab strip, 3 to 5 lines tall in the side panel at the screens measured (the check's tabStrip numbers).
- 4. 🎵 Music onto the box tokens: Move Music's own 190 px and 330 px grid onto the shared box tokens, and the nine different minimum column widths onto one.
- 5. The 56 px bar: Name the 56 px bar once on :root, where it is written by hand in 6 places.
- 6. 📰 What's new and the HUD: Fit what's new (55vh tall in one column) and the heads-up display into boxes, the two panels not yet knolled.
- 7. World design's borders and the place picker: Take World design's dotted borders away (rule 2) and make the place picker a chip box.
- 8. A still bubble room: Hold the bubble room still while the check measures it (holdStill), so its full screen measures the same in every job.
- 9. Firefox, the iPad and the kids' fonts: Measure in Firefox and on the iPad itself, with the fonts the kids' computers have; GitHub's runner has DejaVu Sans and Noto Color Emoji.
- 10. Report 5's dated note: When this report is published, add a dated note to
^du_report(5)pointing here.
How this was put together
Written on 2026-10-21 by Claude, for Matthew, from ^ticket(521). The panels were read in the code at main and counted in node [6]; the space was measured by knoll521 [3] on GitHub, runs out (3 jobs, builds v204, main, c1), out2 (3 jobs, builds v204, main, c1, c2, c3, c4), out3 (3 jobs, builds v204, main, c1, c2, c3, c4, c5, c6, c7, c8, c9, c10); this page is drawn from out3. Nothing was measured on the laptop, and no browser drew this page while it was made: it was built and checked with python (well-formed, every figure drawn, every link a file).
The data: data/report.json, data/whitespace.json (every case of the run: its share, holes, boxes, the picture's size; and each earlier run's means and noise), data/counts.json, all embedded in this page; on GitHub, data and drivers. drivers/gather.py reads the runs, drivers/build.py draws the page. The picture at the top of the series index is the castle with the friend, from the picture archive [7], the place with the longest Background panel (69 rows).
- ^ticket(521) on the dashboard
- ^du_report(5), Always Be Knolling
- tools/checks/knoll521.mjs (this report's copy, drivers/knoll521.mjs)
- the workflow on the branch diag-521 (drivers/knoll521.yml)
- the branch knoll-521
- drivers/count_tabs.mjs, the panels counted in node
- the picture archive: the castle with the friend, as its run of 0.0.347 drew it