Use Windows typography and fix control layout

apps/desktop-tauri/src/components/FormControls.tsx

@@ -51,17 +51,10 @@ export function Select({
   ariaLabel?: string;
   minWidth?: number;
 }) {
-  const selectedLabel = options.find((option) => option.value === value)?.label ?? value;
-  const calculatedWidth = Math.min(
-    128,
-    Math.max(48, Math.ceil((selectedLabel ?? "").length * 6.8) + 18),
-  );
-  const width = Math.max(calculatedWidth, minWidth ?? 0);
-
   return (
     <select
       className="select"
-      style={{ width }}
+      style={{ minWidth }}
       value={value}
       disabled={disabled}
       aria-label={ariaLabel}

apps/desktop-tauri/src/floatbar/FloatBar.css

@@ -29,7 +29,7 @@ body.floatbar-window #root {
   padding: 0;
   background: transparent;
   color: rgba(24, 42, 54, 0.94);
-  font: 600 calc(10px * var(--floatbar-scale, 1))/1 -apple-system, system-ui, "Segoe UI", sans-serif;
+  font: 600 calc(10px * var(--floatbar-scale, 1))/1 var(--font-ui);
   -webkit-user-select: none;
   user-select: none;
   width: max-content;

apps/desktop-tauri/src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles.css";
+import "./surfaces/settings/settings-layout.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

apps/desktop-tauri/src/styles.css

@@ -12,16 +12,8 @@
  */
 :root {
   color-scheme: dark;
-  /* SF-system stack first so the rendered text matches macOS upstream
-     when the host font is available; Inter / Segoe UI remain as the
-     Windows fallbacks. */
-  font-family:
-    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
-    "Segoe UI Variable", Inter, "Segoe UI", system-ui, sans-serif;
-  /* Force macOS-style thin font rendering instead of Windows ClearType
-     heavy strokes. WebView2 (Chromium) respects this. */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  --font-ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+  font-family: var(--font-ui);
   text-rendering: optimizeLegibility;
   background: var(--app-bg, #1c1c1e);
   color: var(--text-primary, #f5f5f7);
@@ -5338,7 +5330,11 @@ html:has(.menu-surface--tray) {
 .select {
   appearance: none;
   -webkit-appearance: none;
-  padding: 0 10px;
+  padding: 0 28px 0 10px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");
+  background-size: 10px 6px;
+  background-repeat: no-repeat;
+  background-position: right 10px center;
   line-height: 20px;
   color-scheme: light;
 }
@@ -5368,15 +5364,10 @@ html:has(.menu-surface--tray) {
 [data-theme="light"] .select,
 [data-theme="light"] .number-input,
 [data-theme="light"] .text-input {
-  background: #fff;
+  background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.12);
   box-shadow: none;
 }
-[data-theme="light"] .select {
-  background-image:
-    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
-    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
-}
 [data-theme="light"] .select option {
   background: #fff;
   color: var(--text-primary);
@@ -6028,16 +6019,14 @@ html:has(.menu-surface--tray) {
   margin-top: 4px;
   font-weight: 500;
 }
-
-.codex-accounts .credential-card__header {
-  flex-direction: column;
-  align-items: stretch;
-  gap: 8px;
+/* Shared Windows typography and control sizing. */
+button, input, select, textarea {
+  font-family: var(--font-ui);
 }
-.codex-accounts .credential-card__actions {
-  justify-content: flex-end;
-  flex-wrap: wrap;
+
+.select, .number-input, .text-input {
+  min-height: 28px;
 }
-.codex-accounts .credential-card__badge {
-  align-self: flex-start;
+.select {
+  max-width: 240px;
 }

apps/desktop-tauri/src/surfaces/settings/settings-layout.css

@@ -0,0 +1,59 @@
+.settings-section {
+  gap: 4px;
+  padding-bottom: 12px;
+}
+
+.settings-section + .settings-section {
+  padding-top: 12px;
+}
+
+.settings-section > .settings-section__title {
+  margin: 0;
+}
+
+.settings-section__title,
+.provider-detail-section h4 {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text-primary);
+}
+
+.settings-field {
+  padding: 8px 0;
+}
+
+.settings-field__label,
+.settings-field__desc,
+.settings-section__hint {
+  line-height: 1.4;
+}
+
+.settings-section__hint {
+  margin: 6px 0 0;
+}
+
+.provider-detail-section {
+  padding: 16px 0;
+  margin-bottom: 0;
+}
+
+.credential-card {
+  padding: 12px;
+}
+
+.codex-accounts .credential-card__header {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.codex-accounts .credential-card__actions {
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.codex-accounts .credential-card__badge {
+  align-self: flex-start;
+}

apps/desktop-tauri/src/surfaces/settings/tabs/GeneralTab.test.tsx

@@ -174,7 +174,7 @@ describe("GeneralTab language picker", () => {
 
     const select = screen.getByRole("combobox", { name: "NotificationSoundTheme" });
     expect(select.querySelectorAll("option")).toHaveLength(2);
-    expect(select).toHaveStyle({ width: "180px" });
+    expect(select).toHaveStyle({ minWidth: "180px" });
     fireEvent.change(select, {
       target: { value: "codexBar" },
     });
@@ -333,4 +333,4 @@ describe("GeneralTab language picker", () => {
     );
 
     expect(screen.queryByRole("combobox", { name: "ThemeLabel" })).toBeNull();
-  });
+  });