From 9ae96d7351b25e683a9e2c894e0ca0b8af879935 Mon Sep 17 00:00:00 2001
From: xuelongmu <xuelongmu@gmail.com>
Date: Tue, 8 Sep 2026 00:12:38 -0400
Subject: [PATCH 1/3] Use Windows typography and fix control layout

---
 .../src/components/FormControls.tsx           |  9 +-
 apps/desktop-tauri/src/floatbar/FloatBar.css  |  2 +-
 apps/desktop-tauri/src/styles.css             | 85 ++++++++++++++++---
 .../settings/tabs/GeneralTab.test.tsx         |  4 +-
 4 files changed, 75 insertions(+), 25 deletions(-)

diff --git a/apps/desktop-tauri/src/components/FormControls.tsx b/apps/desktop-tauri/src/components/FormControls.tsx
index cf1df7a469..ac4db05d7d 100644
--- a/apps/desktop-tauri/src/components/FormControls.tsx
+++ b/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}
diff --git a/apps/desktop-tauri/src/floatbar/FloatBar.css b/apps/desktop-tauri/src/floatbar/FloatBar.css
index c809df443f..33ffce9346 100644
--- a/apps/desktop-tauri/src/floatbar/FloatBar.css
+++ b/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;
diff --git a/apps/desktop-tauri/src/styles.css b/apps/desktop-tauri/src/styles.css
index bfc85bdd2e..1e5cf2661b 100644
--- a/apps/desktop-tauri/src/styles.css
+++ b/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);
@@ -5323,7 +5315,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;
 }
@@ -5358,9 +5354,10 @@ html:has(.menu-surface--tray) {
   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%);
+  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;
 }
 [data-theme="light"] .select option {
   background: #fff;
@@ -6013,3 +6010,63 @@ html:has(.menu-surface--tray) {
   margin-top: 4px;
   font-weight: 500;
 }
+
+/* Shared Windows typography and Settings control spacing. */
+button, input, select, textarea {
+  font-family: var(--font-ui);
+}
+
+.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;
+}
+.select, .number-input, .text-input {
+  min-height: 28px;
+}
+.select {
+  max-width: 240px;
+}
diff --git a/apps/desktop-tauri/src/surfaces/settings/tabs/GeneralTab.test.tsx b/apps/desktop-tauri/src/surfaces/settings/tabs/GeneralTab.test.tsx
index b7592a6170..37ff67e4ee 100644
--- a/apps/desktop-tauri/src/surfaces/settings/tabs/GeneralTab.test.tsx
+++ b/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();
-  });
\ No newline at end of file
+  });

From 94abb56e46d0af1ca3d9901aee0a305e921fac11 Mon Sep 17 00:00:00 2001
From: NessZerra <90105158+Finesssee@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:19:06 +0700
Subject: [PATCH 2/3] Split settings-specific control styles

---
 apps/desktop-tauri/src/main.tsx               |  1 +
 apps/desktop-tauri/src/styles.css             | 56 +-----------------
 .../src/surfaces/settings/settings-layout.css | 59 +++++++++++++++++++
 3 files changed, 61 insertions(+), 55 deletions(-)
 create mode 100644 apps/desktop-tauri/src/surfaces/settings/settings-layout.css

diff --git a/apps/desktop-tauri/src/main.tsx b/apps/desktop-tauri/src/main.tsx
index 358970169a..5b258d4f15 100644
--- a/apps/desktop-tauri/src/main.tsx
+++ b/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>
diff --git a/apps/desktop-tauri/src/styles.css b/apps/desktop-tauri/src/styles.css
index 1e5cf2661b..1d718ee072 100644
--- a/apps/desktop-tauri/src/styles.css
+++ b/apps/desktop-tauri/src/styles.css
@@ -5353,12 +5353,6 @@ html:has(.menu-surface--tray) {
   border: 1px solid rgba(0, 0, 0, 0.12);
   box-shadow: none;
 }
-[data-theme="light"] .select {
-  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;
-}
 [data-theme="light"] .select option {
   background: #fff;
   color: var(--text-primary);
@@ -6011,59 +6005,11 @@ html:has(.menu-surface--tray) {
   font-weight: 500;
 }
 
-/* Shared Windows typography and Settings control spacing. */
+/* Shared Windows typography and control sizing. */
 button, input, select, textarea {
   font-family: var(--font-ui);
 }
 
-.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;
-}
 .select, .number-input, .text-input {
   min-height: 28px;
 }
diff --git a/apps/desktop-tauri/src/surfaces/settings/settings-layout.css b/apps/desktop-tauri/src/surfaces/settings/settings-layout.css
new file mode 100644
index 0000000000..c0d314e750
--- /dev/null
+++ b/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;
+}

From 183a7cfac9b9fa8d9d4710d1e91f1be32c6c4da7 Mon Sep 17 00:00:00 2001
From: NessZerra <90105158+Finesssee@users.noreply.github.com>
Date: Tue, 8 Sep 2026 18:28:56 +0700
Subject: [PATCH 3/3] Preserve current styles in Windows controls

---
 apps/desktop-tauri/src/styles.css | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/desktop-tauri/src/styles.css b/apps/desktop-tauri/src/styles.css
index 1d718ee072..6c4eb97406 100644
--- a/apps/desktop-tauri/src/styles.css
+++ b/apps/desktop-tauri/src/styles.css
@@ -807,6 +807,10 @@ html {
 }
 
 .credential-card__link {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
   font-size: 0.78rem;
   color: var(--text-eyebrow);
   text-decoration: none;
@@ -4292,6 +4296,17 @@ html:has(.menu-surface--tray) {
   flex: 0 0 auto;
 }
 
+/* A live forecast is its own full-width row. Release the base percent label's
+   no-shrink rule so refreshed text is constrained by the row and tail-truncated
+   inside the fixed tray width instead of painting past it. */
+.menu-metric__forecast .menu-metric__pct {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .menu-metric__reset {
   font-size: 11px;
   color: var(--text-secondary);
@@ -5349,7 +5364,7 @@ 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;
 }
@@ -6004,7 +6019,6 @@ html:has(.menu-surface--tray) {
   margin-top: 4px;
   font-weight: 500;
 }
-
 /* Shared Windows typography and control sizing. */
 button, input, select, textarea {
   font-family: var(--font-ui);