logaritmisk/biggus-dickus
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend polish: select placeholder copy, locked-field affordance in edit mode, field-list overflow, narrow-mode sidebar toggle, heading wrap #73

New Issue
Closed
opened 2026-06-09 21:27:33 +00:00 by logaritmisk · 1 comment
logaritmisk commented 2026-06-09 21:27:33 +00:00
Owner
Copy Link
Copy Source

Grab-bag of small verified design/layout nits from a UI sweep — none worth an issue alone:

  1. "— select —" placeholder copy — form.selectPlaceholder is "— select —" / "— välj —" (src/i18n/en.json:8, sv.json:8). Em-dash-wrapped lowercase reads as decoration, not an affordance, and diverges from every other placeholder which ends in … (Filter…, Search…). → "Select…" / "Välj…".

  2. Edit mode silently locks fields with no explanation — src/fields/field-form.tsx:118, 127, 144-148, 166-170: key input, type select, vocabulary select, and authority-kind select all get disabled={isEdit} with no hint why. A user editing a field sees four grayed controls and can't tell if it's a bug or a rule. → add a muted caption under the locked group (e.g. "Key and type are fixed after creation" / sv equivalent), or a tooltip on each.

  3. Field-list rows can overflow the 20rem column — src/fields/field-list.tsx:92-101: the row button lays out label + key + type badge + required * in a non-wrapping flex with no min-w-0/truncate. A long label or key pushes the badge out of the clipped column. → min-w-0 on the button, truncate on the label span, shrink-0 on the badge.

  4. Sidebar toggle renders as a disabled ghost on narrow viewports — src/shell/sidebar.tsx:80-92: on <768px the toggle gets disabled={narrow} + disabled:opacity-50, so mobile users see a permanently grayed-out button that communicates "broken" rather than "unavailable". → hide it on narrow (hidden md:flex) instead of disabling.

  5. Page titles don't balance-wrap — src/components/ui/page-title.tsx:9: long titles (object names as page titles) line-break raggedly on narrow viewports. → add text-balance to the h1 base classes.

All are token-safe and bundle-neutral.

Grab-bag of small verified design/layout nits from a UI sweep — none worth an issue alone: 1. **"— select —" placeholder copy** — `form.selectPlaceholder` is `"— select —"` / `"— välj —"` (`src/i18n/en.json:8`, `sv.json:8`). Em-dash-wrapped lowercase reads as decoration, not an affordance, and diverges from every other placeholder which ends in `…` (`Filter…`, `Search…`). → `"Select…"` / `"Välj…"`. 2. **Edit mode silently locks fields with no explanation** — `src/fields/field-form.tsx:118, 127, 144-148, 166-170`: key input, type select, vocabulary select, and authority-kind select all get `disabled={isEdit}` with no hint *why*. A user editing a field sees four grayed controls and can't tell if it's a bug or a rule. → add a muted caption under the locked group (e.g. `"Key and type are fixed after creation"` / sv equivalent), or a tooltip on each. 3. **Field-list rows can overflow the 20rem column** — `src/fields/field-list.tsx:92-101`: the row button lays out label + key + type badge + required `*` in a non-wrapping flex with no `min-w-0`/`truncate`. A long label or key pushes the badge out of the clipped column. → `min-w-0` on the button, `truncate` on the label span, `shrink-0` on the badge. 4. **Sidebar toggle renders as a disabled ghost on narrow viewports** — `src/shell/sidebar.tsx:80-92`: on `<768px` the toggle gets `disabled={narrow}` + `disabled:opacity-50`, so mobile users see a permanently grayed-out button that communicates "broken" rather than "unavailable". → hide it on narrow (`hidden md:flex`) instead of disabling. 5. **Page titles don't balance-wrap** — `src/components/ui/page-title.tsx:9`: long titles (object names as page titles) line-break raggedly on narrow viewports. → add `text-balance` to the `h1` base classes. All are token-safe and bundle-neutral.
logaritmisk commented 2026-06-10 11:47:52 +00:00
Author
Owner
Copy Link
Copy Source

Fixed in 62c5697 (merged as 97c63ac). All five items:

  1. form.selectPlaceholder → "Select…" / "Välj…" (the two field-input combobox tests updated to match).
  2. FieldForm edit mode shows a muted fields.lockedNote caption — "Key and type can't be changed after creation." / "Nyckel och typ kan inte ändras efter att fältet skapats." — above the locked controls.
  3. FieldList rows: min-w-0 on the row button, truncate on the label, shrink-0 on the type badge and required marker.
  4. Sidebar toggle: hidden md:flex on narrow viewports instead of disabled + grayed (the disabled:* classes and disabled={narrow} are gone).
  5. PageTitle h1 now has text-balance.

i18n en/sv parity maintained; full gate green (300/300).

Fixed in 62c5697 (merged as 97c63ac). All five items: 1. `form.selectPlaceholder` → "Select…" / "Välj…" (the two field-input combobox tests updated to match). 2. `FieldForm` edit mode shows a muted `fields.lockedNote` caption — "Key and type can't be changed after creation." / "Nyckel och typ kan inte ändras efter att fältet skapats." — above the locked controls. 3. `FieldList` rows: `min-w-0` on the row button, `truncate` on the label, `shrink-0` on the type badge and required marker. 4. Sidebar toggle: `hidden md:flex` on narrow viewports instead of `disabled` + grayed (the `disabled:*` classes and `disabled={narrow}` are gone). 5. `PageTitle` h1 now has `text-balance`. i18n en/sv parity maintained; full gate green (300/300).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logaritmisk
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: logaritmisk/biggus-dickus#73