web: a knob's ruler stands in the strip's slot, and a sub-chip is its name again

The strip a chip opened kept a row of its own while a knob's ruler opened over
it, so WB's COLOR TEMP put the panel on the screen twice — the rows in the strip
and the panel under them — and charged the photo a row for the saying. The path
under the bar (.crumb) already names the panel the ruler came from and is one tap
from its strip, so the ruler now stands in the strip's slot and the strip stands
down with the bar: on 390x844 LIGHT's WB strip is 42px and the photo 639px,
COLOR TEMP's ruler 60px and the photo 621px, the path TABS > LIGHT > WB >
COLOR TEMP walking back to the strip and then to the bar.

A sub-chip also wore the initials of its own label on a tile over it — COLOR TEMP
as CT, PRO NEG HI as PNH — which is the name the pill already prints, spelled
twice and set 60px tall: LIGHT's WB strip measured 73px on that tile, 42px as the
name alone. The ruler's own "<" goes with them: the path names the strip it would
reopen, and a wide screen draws neither the path nor a ruler in the bar.

Checks:
- npm run build (tsc --noEmit + vite) clean: dist/assets/index-2IP_1LL_.css
  71.42 kB.
- Chromium 390x844, light and dark, LIGHT: the bar 40px / the photo 641px; WB
  open, the bar gone and its strip 42px in the slot, the photo 639px; COLOR TEMP's
  ruler 60px in that slot, the photo 621px, the path TABS > LIGHT > WB >
  COLOR TEMP; crumb-strip lands back on the WB strip and crumb-tab on the bar at
  641px. No page error and no sideways scroll (390px of 390px) in any state; on
  1280x900 .dev-panels is painted and .dev-chips/.crumb are not.
This commit is contained in:
2026-10-01 07:25:37 +07:00
parent 9aa3424e92
commit 7b6a1a805f
3 changed files with 25 additions and 57 deletions
-5
View File
@@ -17,10 +17,6 @@ export interface ChipDef {
// CSS colour drawn as a dot on the chip's leading edge — the HSL mixer's band
// chips name a colour, so they show it too.
color?: string;
// The button's face on a phone, where a sub-chip is a tile: a short mark over
// the name (see .col-sub .chip in app.css). Desktop never paints it — the
// label alone is what a chip reads as in a column.
icon?: string;
// The chip's own FILL and the text colour that fill can carry (WB's preset
// table: the swatch the pick paints, printed on the button itself). `bg` wins
// over the class's own background, so an active button keeps its swatch and
@@ -103,7 +99,6 @@ export function ChipRow({ chips, grid }: { chips: ChipDef[]; grid?: boolean }) {
}}
>
{chip.color ? <span className="chip-dot" data-color={chip.color} style={{ background: chip.color }} /> : null}
{chip.icon ? <span className="chip-icon" aria-hidden="true">{chip.icon}</span> : null}
{/* The name is a box, not the bare text node it used to be: a flex
container turns a loose text node into an anonymous item of its
own, and on iOS that item stops being painted until the column