HSL: click a colour chip to open its panel, the way PICK does

The colour band chips only aimed the mixer before; now they open the same
panel the eyedropper opens, seeded with the colour the chip is named after
(hexToRgb turns that readout back into the RGB bytes the picker stores).
A pick already on the photo keeps its spot — only a mixer with nowhere to
hang takes the middle of the frame.

The HSL column itself is untouched: 8 chips, the rule, IMAGE,
HUE/SAT/LUM, the readout and RESET all stay where they were.

docker/frontend/src/ui/ChipColumn.tsx

@@ -99,7 +99,12 @@ 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.label}
+            {/* 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
+                it sits in is touched. Same fault, same shape as the panel head
+                (see `dev-panel-label` in DevelopPanels). No rule of its own. */}
+            <span className="chip-label">{chip.label}</span>
             {chip.value ? <span className="val">{chip.value}</span> : null}
             {chip.pro ? <span className="pro">PRO</span> : null}
           </button>

docker/frontend/src/ui/ToolRail.tsx

@@ -72,7 +72,10 @@ export function ToolRail({
           }}
         >
           <span className="glyph" aria-hidden="true">{entry.glyph}</span>
-          {t(entry.label)}
+          {/* A box, not a bare text node: on a phone the glyph is display:none
+              and the name would be the button's only child — an anonymous flex
+              item, which is the one thing iOS stops painting until a touch. */}
+          <span className="rail-label">{t(entry.label)}</span>
         </button>
       ))}
       {/* The build this page came off, at the foot of the rail: an image on the

docker/frontend/src/ui/TopBar.tsx

@@ -155,9 +155,13 @@ export function TopBar({
         {menu === 'theme' ? (
           <div className="popover">
             <div className="chip-row">
-              <button type="button" className={`chip${mode === 'light' ? ' on' : ''}`} onClick={() => setMode('light')}>Light</button>
-              <button type="button" className={`chip${mode === 'dark' ? ' on' : ''}`} onClick={() => setMode('dark')}>Dark</button>
-              <button type="button" className={`chip${mode === 'auto' ? ' on' : ''}`} data-key="theme-auto" onClick={() => setMode('auto')}>Auto</button>
+              {/* The name is a span, not a bare text node: a chip is a flex row,
+                  and a loose text node in one is an anonymous item — the shape
+                  iOS stops painting until the page is touched (same as the
+                  panel heads and ChipRow's chips). */}
+              <button type="button" className={`chip${mode === 'light' ? ' on' : ''}`} onClick={() => setMode('light')}><span className="chip-label">Light</span></button>
+              <button type="button" className={`chip${mode === 'dark' ? ' on' : ''}`} onClick={() => setMode('dark')}><span className="chip-label">Dark</span></button>
+              <button type="button" className={`chip${mode === 'auto' ? ' on' : ''}`} data-key="theme-auto" onClick={() => setMode('auto')}><span className="chip-label">Auto</span></button>
             </div>
             <div className="chip-row" style={{ marginTop: 8 }}>
               {ACCENTS.map((entry) => (
@@ -167,7 +171,7 @@ export function TopBar({
                   className={`chip${accent === entry.id ? ' on' : ''}`}
                   onClick={() => setAccent(entry.id)}
                 >
-                  {entry.label}
+                  <span className="chip-label">{entry.label}</span>
                 </button>
               ))}
             </div>
@@ -204,7 +208,7 @@ export function TopBar({
                   setMenu(null);
                 }}
               >
-                {entry.label}
+                <span className="chip-label">{entry.label}</span>
               </button>
             ))}
           </div>