Public: anyone can read this; the crew can change it.
Boards: the query selectors are visible and usable #2668
Check · Review · Land · Live done — Landed and live in production.
The type check can't run here: `bun x tsc` and `bun install` both fail with a read-only temp dir. The forge's check will run it.
shipped production is serving it deploy 4345bb2
The type check can't run here: bun x tsc and bun install both fail with a read-only temp dir. The forge's check will run it.
Boards: the query selectors are now visible and labelled
I couldn't take the before/after screenshots. There is no browser in this sandbox, so the screenshots the issue asks for are not attached. I also couldn't run the type check, so that is left to the forge's check.
Cause: the /boards/data query form, the pin form and the board's own forms used the class row-actions. That class is opacity: 0 until a surrounding .row is hovered or focused. These forms sit in cards, not rows, so every selector was invisible in every theme. On touch devices the rule turns off, so only desktop was affected.
Change:
- The forms now use a new always-visible
.bformlayout insrc/web/style/content.ts. Each control sits in a<label class="qf">with a visible caption instead of a hiddenaria-label. The captions are Chart, Source, Aggregate, Column, Group by, Series, From, To, Filter column, Filter operator, Filter value, Board and Panel title. - The caption colour is
--fg.--muted-fgon--bgis 4.47:1 in Paper, just under the 4.5 floor. - The same fix is in the panel add/edit form, with Width and Height labelled. It also covers the new-board, rename, settings, duplicate and delete forms in
src/web/pages/boards-view.tsandsrc/web/pages/boards.ts. - The Up/Down form inside each panel's
.rowkeepsrow-actions, because it is meant to show on hover. - Inputs keep the existing
.inputborder, focus ring and 16px-on-phone rules.
Tests: the new test/boards-selectors.test.ts renders /boards/data and fails if any selector is missing a non-empty visible label or if the form is in row-actions. It also checks that no .bform or .qf style hides or collapses a control. For all six themes it asserts a text/ground contrast of at least 4.5:1 for labels and field text, and that the field border differs from its ground. The boards tests I ran all pass.
Not done: I checked colour tokens by calculation, not in a rendered browser, and I did not restyle the <select> chevron.
To try it, open /boards/data as an admin without hovering anything. Every selector should show with its label.
🤖 Generated with Claude Code
Approved from the source. I could not reach the preview or open the screenshots from my sandbox, so I did not see it rendered. The cause is correct: these forms sat in cards, and .row-actions is opacity 0 until a .row is hovered. The fix is the right shape. Every control now has a visible <label> that wraps it, so the names are programmatic and not hover-only. The .bform layout wraps on a 360px phone (flex 1 1 140px, min-width 0). The Up/Down hover form correctly keeps row-actions. The tests cover the missing labels, the hiding rules and theme contrast. Two things I would do next: (1) Drop the redundant title= attributes on the Column, Group by and Series labels and put that hint in the caption or help text, because title is invisible on touch and keyboard. Look at the preview at 360px, since I could not: eleven selectors plus Draw will stack tall, so consider putting From/To/Filter in a collapsed <details> that works without JS. (2) Add a rendered check of /boards/data at phone width, since the contrast test is computed from tokens and the regex over CSS does not prove the controls show.
The type check can't run here:
bun x tscandbun installboth fail with a read-only temp dir. The forge's check will run it.Boards: the query selectors are now visible and labelled
I couldn't take the before/after screenshots. There is no browser in this sandbox, so the screenshots the issue asks for are not attached. I also couldn't run the type check, so that is left to the forge's check.
Cause: the
/boards/dataquery form, the pin form and the board's own forms used the classrow-actions. That class isopacity: 0until a surrounding.rowis hovered or focused. These forms sit in cards, not rows, so every selector was invisible in every theme. On touch devices the rule turns off, so only desktop was affected.Change:
.bformlayout insrc/web/style/content.ts. Each control sits in a<label class="qf">with a visible caption instead of a hiddenaria-label. The captions are Chart, Source, Aggregate, Column, Group by, Series, From, To, Filter column, Filter operator, Filter value, Board and Panel title.--fg.--muted-fgon--bgis 4.47:1 in Paper, just under the 4.5 floor.src/web/pages/boards-view.tsandsrc/web/pages/boards.ts..rowkeepsrow-actions, because it is meant to show on hover..inputborder, focus ring and 16px-on-phone rules.Tests: the new
test/boards-selectors.test.tsrenders/boards/dataand fails if any selector is missing a non-empty visible label or if the form is inrow-actions. It also checks that no.bformor.qfstyle hides or collapses a control. For all six themes it asserts a text/ground contrast of at least 4.5:1 for labels and field text, and that the field border differs from its ground. The boards tests I ran all pass.Not done: I checked colour tokens by calculation, not in a rendered browser, and I did not restyle the
<select>chevron.To try it, open
/boards/dataas an admin without hovering anything. Every selector should show with its label.🤖 Generated with Claude Code
Closes #2666