From c989b8a519db4ea337c7b91f37b6a983472cddda Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Sat, 18 Jul 2026 12:16:30 +0100
Subject: [PATCH] fix(ui): settings language picker was oversized and unthemed
 (#110621)

* fix(ui): settings language picker matches the settings design language

* fix(ui): keep Web Awesome available-height bound in language listbox cap

* fix(ui): restore forced-colors focus outlines for the language picker
---
 ui/src/styles/settings.css | 90 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 87 insertions(+), 3 deletions(-)

diff --git a/ui/src/styles/settings.css b/ui/src/styles/settings.css
index d859c334dc45..c1ae6ec56fbd 100644
--- a/ui/src/styles/settings.css
+++ b/ui/src/styles/settings.css
@@ -416,12 +416,18 @@ wa-radio-group.settings-segmented::part(radios) {
 .settings-select {
   width: 100%;
   min-width: 0;
+  font: inherit;
+  font-size: var(--control-ui-input-text-size);
+}
+
+/* Native controls own their box. wa-select draws the same box on its shadow
+   combobox part below; host chrome would double-border the web component. */
+.settings-input,
+select.settings-select {
   border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--bg) 80%, var(--bg-elevated) 20%);
   color: var(--text);
-  font: inherit;
-  font-size: var(--control-ui-input-text-size);
   padding: 7px 10px;
   transition: border-color var(--duration-fast) var(--ease-out);
 }
@@ -495,12 +501,90 @@ wa-radio-group.settings-segmented::part(radios) {
 }
 
 .settings-input:focus-visible,
-.settings-select:focus-visible {
+select.settings-select:focus-visible {
   outline: none;
   border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
 }
 
+/* ── Web Awesome select ── */
+
+wa-select.settings-select {
+  --wa-form-control-activated-color: var(--accent);
+}
+
+wa-select.settings-select::part(combobox) {
+  min-height: var(--settings-control-height);
+  padding-inline: 10px;
+  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--bg) 80%, var(--bg-elevated) 20%);
+  color: var(--text);
+  cursor: default;
+  transition: border-color var(--duration-fast) var(--ease-out);
+}
+
+/* [open] is required alongside :focus-within: Chromium does not propagate
+   :focus-within to the host while a slotted option holds focus, so the open
+   state must key off the reflected attribute or the stock ring leaks through. */
+wa-select.settings-select[open]::part(combobox),
+wa-select.settings-select:focus-within::part(combobox) {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+wa-select.settings-select::part(expand-icon) {
+  margin-inline-start: var(--space-2);
+  font-size: var(--control-ui-text-sm);
+  color: var(--muted);
+}
+
+wa-select.settings-select::part(listbox) {
+  /* Keep Web Awesome's collision-aware bound in the cap; replacing it outright
+     would let the listbox overflow when the popup has little room to open. */
+  max-height: min(320px, var(--auto-size-available-height, calc(100vh - 48px)));
+  padding: 6px;
+  border: 1px solid color-mix(in srgb, var(--border-strong) 86%, transparent);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-lg);
+  color: var(--text);
+}
+
+wa-select.settings-select wa-option {
+  padding: 6px 8px;
+  border-radius: calc(var(--radius-md) - 4px);
+  font-size: var(--control-ui-text-md);
+  color: var(--text);
+  cursor: default;
+}
+
+/* The roving "current" option already carries the accent fill; the global
+   :focus-visible accent outline on top of it is pure noise. */
+wa-select.settings-select wa-option:focus-visible {
+  outline: none;
+}
+
+wa-select.settings-select wa-option:state(current) {
+  color: var(--accent-foreground);
+}
+
+/* Forced colors suppresses the box-shadow ring and accent fill that stand in
+   for the outlines removed above, so restore system-color outlines there. */
+@media (forced-colors: active) {
+  wa-select.settings-select[open]::part(combobox),
+  wa-select.settings-select:focus-within::part(combobox) {
+    outline: 2px solid SelectedItem;
+    outline-offset: 2px;
+  }
+
+  wa-select.settings-select wa-option:focus-visible {
+    outline: 2px solid SelectedItem;
+    outline-offset: 2px;
+  }
+}
+
 textarea.settings-input {
   min-height: 88px;
   resize: vertical;