Skip to content

Restyle tabs and option groups - #895

Merged
enaboapps merged 4 commits into
mainfrom
885-tabs-options
Sep 25, 2026
Merged

enaboapps merged 4 commits into
mainfrom
885-tabs-options

Conversation

@enaboapps

@enaboapps enaboapps commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

Closes #885. Stacked on #894, tracked in #891.

What changed

  • Tab bars are a single row. Tabs split the width equally, and long labels wrap inside their own tab, so Settings' Updates tab no longer sits alone on a second line.
  • The selected tab has a brand underline and bolder text instead of a filled box. Under forced colours it gets a 4px Highlight border instead of the shadow underline.
  • Tab focus uses an inset ring, which sits within the tab above the shared underline.
  • Tab bars no longer reuse the option-group class. The roving tab stop, arrow keys, Home and End, and the attention marker are unchanged.
  • Selected option-group and setup choices fill with the brand container, bolden, and carry a tick drawn with borders. The tick has empty content, so it is not added to the button's accessible name. It gives a shape cue that is distinct from the blue focus ring.
  • Five-option groups use narrower minimum columns so they wrap less.

Validation

On this head:

  • npm run lint passed
  • npm test passed: 238 Vitest tests and 5 Node tests
  • npm run build passed
  • cargo fmt --check, cargo clippy --all-targets -D warnings and cargo test passed (566 tests, 1 ignored). No Rust changes in this stack.
  • Rendered every Settings tab, Mouse with its sections open, and Scanning's Point settings in headless Chrome at 920px and 620px, light and dark.

Review follow-up

An independent review of this layer's head raised these points, now addressed:

  • Tabs split the row equally and wrap long labels inside themselves. Before this, the row scrolled, and between roughly 800px and 890px wide it hid the Updates tab and its failure marker. The row wraps only when single words can't fit.
  • Tabs keep one weight so neighbours don't shift. Unselected choices get their hover state back.
  • A re-review found that the 64px tab minimum overrode word width, so a long word could spill out of its tab at high zoom. Tabs now never shrink below their longest word. It also found the restored hover applied to disabled choices, and hover is now limited to enabled choices outside disabled groups. Checked at 310px wide, the 620px window at 200% zoom.

🤖 Generated with Claude Code

Rebase validation (2026-09-25)

Rebased onto current main (7fb8fce, including #881) in stack order. git range-diff shows every commit in this PR is patch-equivalent to its previous head, and the intended parent remains its PR base. On the final stack tip (40c75cc), Node 24.19.0 lint, tests and build passed; Rust 1.97.1 format check, Clippy and tests passed. An independent review of the updated PR heads found no actionable findings. CI is rerunning on each new head.

@enaboapps enaboapps added this to the v1.0.0-rc.16 milestone Sep 25, 2026
@enaboapps
enaboapps force-pushed the 885-tabs-options branch 2 times, most recently from 338f293 to 054f9e2 Compare September 25, 2026 11:03
@enaboapps
enaboapps marked this pull request as ready for review September 25, 2026 11:49
OwenMcGirr and others added 3 commits September 25, 2026 12:49
Tabs become one underlined row that shares the width and scrolls
sideways only when it cannot fit, so Settings no longer wraps its last
tab onto a line of its own. The selected tab is marked by a brand
underline and heavier text, with a Highlight border under forced
colours, and focus draws an inset ring the scrolling row cannot clip.
Selected choices in option groups and setup choices fill with the brand
container and carry a drawn tick that stays out of the accessible name.

Closes #885

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Between roughly 800px and 890px the Settings tabs overflowed the
scrolling row and hid Updates, its failure marker and, after opening
Updates from the banner, the selected tab itself. Tabs now split the row
equally and wrap long labels inside themselves; the row wraps only when
single words cannot fit. Tabs keep one weight so changing tab never
shifts neighbours, and unselected choices get their hover back.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
A tab's 64px minimum overrode its word width, so at high zoom a long
word spilled out of its tab instead of the row wrapping. Tabs now never
shrink below their longest word. The restored hover no longer applies
to disabled choices, which Chromium still hovers.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@enaboapps
enaboapps marked this pull request as draft September 25, 2026 11:50
Base automatically changed from 884-home-status to main September 25, 2026 13:55
@enaboapps
enaboapps marked this pull request as ready for review September 25, 2026 13:56
@enaboapps
enaboapps merged commit 7638f42 into main Sep 25, 2026
6 checks passed
@enaboapps
enaboapps deleted the 885-tabs-options branch September 25, 2026 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Restyle tabs and option groups

2 participants