From 0e098ceba4259af21049f86a296bd6d1179ebcb1 Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Fri, 25 Sep 2026 11:21:33 +0100
Subject: [PATCH 1/3] Restyle tabs and option groups

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>
---
 src/Tabs.tsx   |  2 +-
 src/ui/app.css | 39 ++++++++++++++++++++++++++-------------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index ee331655..ffd7551f 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -39,7 +39,7 @@ export function Tabs<T extends string>({ name, tabs, active, onSelect, label }:
   };
 
   return <>
-    <div className="segmented tab-bar" role="tablist" aria-label={label} ref={listRef} style={{ ["--tab-count" as string]: tabs.length }}>
+    <div className="tab-bar" role="tablist" aria-label={label} ref={listRef}>
       {tabs.map((tab, index) => <Button
         key={tab.id}
         type="button"
diff --git a/src/ui/app.css b/src/ui/app.css
index 401c6520..1cfa907e 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -320,22 +320,36 @@ main { min-width: 0; }
 .teaching-demo { max-width: 100%; padding: 16px; }
 .teaching-caption { font-size: 18px; }
 
-/* --- Segmented choices and tabs --------------------------------------------- */
-.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; min-width: 0; margin: 0 0 22px; border: 0; padding: 0; background: transparent; }
-.segmented.compact { width: 100%; margin: 0; }
-.segmented .btn { color: var(--muted); border-color: var(--border); background: var(--surface); }
-.segmented .btn:is([aria-pressed="true"], [aria-selected="true"]) { border: 2px solid var(--brand); color: var(--on-brand-container); background: var(--brand-container); box-shadow: inset 0 0 0 1px var(--brand-border); }
-
-.tab-bar { width: 100%; margin-bottom: 24px; }
-.tab-bar .btn { position: relative; padding: 12px 8px; }
-/* Positioned siblings paint in order, so lift a focused tab or the selected
-   neighbour overpaints one edge of its focus ring. */
-.tab-bar .btn:focus-visible { z-index: 1; }
+/* --- Choices -----------------------------------------------------------------
+   An option group is a row of equal buttons. The selected one fills with the
+   brand container and carries a drawn tick, so it differs from focus (a blue
+   ring outside the button) by shape as well as colour. The tick is an empty
+   pseudo-element, so it never becomes part of the button's name. */
+.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; width: 100%; min-width: 0; margin: 0; }
+.segmented.five { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
+.segmented .btn, .setup-choices .btn { color: var(--text); border-color: var(--border-strong); background: var(--surface); font-weight: 500; }
+.segmented .btn[aria-pressed="true"], .setup-choices .btn[aria-pressed="true"] { border: 2px solid var(--brand); padding-inline: 18px; color: var(--on-brand-container); background: var(--brand-container); font-weight: 700; }
+.segmented .btn[aria-pressed="true"]::before, .setup-choices .btn[aria-pressed="true"]::before { flex: none; width: 7px; height: 13px; margin: -4px 2px 0 0; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); content: ""; }
+
+/* --- Tabs ----------------------------------------------------------------------
+   One row that never wraps: tabs share the width and the row scrolls
+   sideways only if it truly cannot fit. The selected tab is marked by a brand
+   underline and stronger text rather than a filled box, so tabs never read as
+   a set of buttons competing with the page's own actions. */
+.tab-bar { display: flex; gap: 4px; width: 100%; margin-bottom: 24px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
+.tab-bar .btn { position: relative; flex: 1 0 auto; border: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; padding: 12px 16px; color: var(--muted); background: transparent; font-weight: 600; }
+.tab-bar .btn:hover { color: var(--text); background: var(--surface-hover); }
+.tab-bar .btn[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -4px 0 var(--brand); font-weight: 700; }
+/* Inset, because the scrolling row would clip a ring drawn outside it. */
+.tab-bar .btn:focus-visible { outline-offset: -3px; }
 .tab-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
 /* Out of flow so a marker never wraps the label and grows the tab row. The
    transparent outline is invisible normally and becomes a visible ring under
    forced colours, where the background alone would be flattened away. */
-.tab-attention { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; outline: 1px solid transparent; background: var(--status-error); }
+.tab-attention { position: absolute; top: 8px; right: 6px; width: 8px; height: 8px; border-radius: 50%; outline: 1px solid transparent; background: var(--status-error); }
+@media (forced-colors: active) {
+  .tab-bar .btn[aria-selected="true"] { border-bottom: 4px solid Highlight; }
+}
 
 /* --- Colour pickers --------------------------------------------------------- */
 .color-options, .scanner-colours { display: flex; flex-wrap: wrap; gap: 12px; }
@@ -467,7 +481,6 @@ main { min-width: 0; }
 .setup-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 4px; }
 .setup-content p { margin-top: 8px; color: var(--muted); }
 .setup-choices { margin-top: 22px; }
-.setup-choices .btn[aria-pressed="true"] { border-color: var(--brand); color: var(--on-brand-container); background: var(--segment-selected); box-shadow: inset 0 0 0 1px var(--brand-border); }
 .setup-privacy { margin-top: 18px; color: var(--brand-label); }
 .setup-navigation-guidance { flex: 0 0 auto; margin: 0; color: var(--muted); line-height: 1.5; }
 .setup-navigation-guidance:not(:empty) { padding-bottom: 16px; }

From 2d94f1fcbb990dd629c2d6e1c39084346f4e3558 Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Fri, 25 Sep 2026 11:51:10 +0100
Subject: [PATCH 2/3] Share the tab row equally instead of scrolling it

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>
---
 src/ui/app.css | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/ui/app.css b/src/ui/app.css
index 1cfa907e..50826443 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -329,18 +329,21 @@ main { min-width: 0; }
 .segmented.five { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
 .segmented .btn, .setup-choices .btn { color: var(--text); border-color: var(--border-strong); background: var(--surface); font-weight: 500; }
 .segmented .btn[aria-pressed="true"], .setup-choices .btn[aria-pressed="true"] { border: 2px solid var(--brand); padding-inline: 18px; color: var(--on-brand-container); background: var(--brand-container); font-weight: 700; }
+.segmented .btn:not([aria-pressed="true"]):hover, .setup-choices .btn:not([aria-pressed="true"]):hover { background: var(--surface-hover); }
 .segmented .btn[aria-pressed="true"]::before, .setup-choices .btn[aria-pressed="true"]::before { flex: none; width: 7px; height: 13px; margin: -4px 2px 0 0; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); content: ""; }
 
 /* --- Tabs ----------------------------------------------------------------------
-   One row that never wraps: tabs share the width and the row scrolls
-   sideways only if it truly cannot fit. The selected tab is marked by a brand
-   underline and stronger text rather than a filled box, so tabs never read as
-   a set of buttons competing with the page's own actions. */
-.tab-bar { display: flex; gap: 4px; width: 100%; margin-bottom: 24px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
-.tab-bar .btn { position: relative; flex: 1 0 auto; border: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; padding: 12px 16px; color: var(--muted); background: transparent; font-weight: 600; }
+   Tabs split one row equally; a long label wraps inside its own tab first,
+   and the row itself wraps only when single words cannot fit (extreme zoom),
+   so no tab, selection or attention marker is ever scrolled out of sight. The selected tab
+   is marked by a brand underline and ink colour rather than a filled box, so
+   tabs never read as a set of buttons competing with the page's own actions.
+   Every tab keeps one weight, so changing tabs never shifts its neighbours. */
+.tab-bar { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
+.tab-bar .btn { position: relative; flex: 1 1 0; text-align: center; border: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; padding: 12px 16px; color: var(--muted); background: transparent; font-weight: 600; }
 .tab-bar .btn:hover { color: var(--text); background: var(--surface-hover); }
-.tab-bar .btn[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -4px 0 var(--brand); font-weight: 700; }
-/* Inset, because the scrolling row would clip a ring drawn outside it. */
+.tab-bar .btn[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -4px 0 var(--brand); }
+/* Inset, so the ring sits within the tab above the shared underline. */
 .tab-bar .btn:focus-visible { outline-offset: -3px; }
 .tab-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
 /* Out of flow so a marker never wraps the label and grows the tab row. The

From 61f8f642dd13eebbad4607dfb3a01d7242faa54b Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Fri, 25 Sep 2026 12:00:28 +0100
Subject: [PATCH 3/3] Keep words inside tabs and hover off disabled choices

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>
---
 src/ui/app.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/ui/app.css b/src/ui/app.css
index 50826443..4ffa2bbd 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -329,18 +329,20 @@ main { min-width: 0; }
 .segmented.five { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
 .segmented .btn, .setup-choices .btn { color: var(--text); border-color: var(--border-strong); background: var(--surface); font-weight: 500; }
 .segmented .btn[aria-pressed="true"], .setup-choices .btn[aria-pressed="true"] { border: 2px solid var(--brand); padding-inline: 18px; color: var(--on-brand-container); background: var(--brand-container); font-weight: 700; }
-.segmented .btn:not([aria-pressed="true"]):hover, .setup-choices .btn:not([aria-pressed="true"]):hover { background: var(--surface-hover); }
+.segmented .btn:enabled:not([aria-pressed="true"], fieldset:disabled *):hover, .setup-choices .btn:enabled:not([aria-pressed="true"]):hover { background: var(--surface-hover); }
 .segmented .btn[aria-pressed="true"]::before, .setup-choices .btn[aria-pressed="true"]::before { flex: none; width: 7px; height: 13px; margin: -4px 2px 0 0; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); content: ""; }
 
 /* --- Tabs ----------------------------------------------------------------------
    Tabs split one row equally; a long label wraps inside its own tab first,
-   and the row itself wraps only when single words cannot fit (extreme zoom),
+   and, because no tab may be narrower than its longest word, the row itself
+   wraps only when single words cannot fit (extreme zoom). Every label plus
+   its padding is wider than the 64px target, so min-content keeps that too,
    so no tab, selection or attention marker is ever scrolled out of sight. The selected tab
    is marked by a brand underline and ink colour rather than a filled box, so
    tabs never read as a set of buttons competing with the page's own actions.
    Every tab keeps one weight, so changing tabs never shifts its neighbours. */
 .tab-bar { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
-.tab-bar .btn { position: relative; flex: 1 1 0; text-align: center; border: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; padding: 12px 16px; color: var(--muted); background: transparent; font-weight: 600; }
+.tab-bar .btn { position: relative; flex: 1 1 0; min-width: min-content; text-align: center; border: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; padding: 12px 16px; color: var(--muted); background: transparent; font-weight: 600; }
 .tab-bar .btn:hover { color: var(--text); background: var(--surface-hover); }
 .tab-bar .btn[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -4px 0 var(--brand); }
 /* Inset, so the ring sits within the tab above the shared underline. */