From 3f870bdac1c9aca0f6f7602471e7ee0392d2707b Mon Sep 17 00:00:00 2001
From: RealZST <zst9626@126.com>
Date: Fri, 1 May 2026 17:27:25 +0300
Subject: [PATCH] fix(select): normalize <select> chrome on desktop too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Native macOS Aqua chrome renders <select> as heavy 3D-style buttons in
WKWebView on macOS 15.x Sequoia, clashing with the rest of the flat UI
(see #26 for screenshots). Newer macOS releases ship a flatter native
chrome, but we can't rely on the user's OS version.

Drop the `!isDesktop()` gate from `webSelectStyle` and `isWeb` so the
normalized chrome (appearance: none + custom SVG arrow + matching border
/ padding) applies on desktop too. Add `WebkitAppearance: "none"` next
to `appearance: "none"` as a defensive belt-and-suspenders for any
older WebKit that doesn't honor unprefixed (Safari 15.4+ supports
unprefixed; this is purely defensive).

Verified visually in Tauri dev on macOS 26.4 — desktop renders identical
to web. Original report from @Orchardxyz on macOS 15.6.

Closes #26

Co-authored-by: Orchard <orchardyz@outlook.com>
---
 src/lib/web-select.ts | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/lib/web-select.ts b/src/lib/web-select.ts
index 0095113..fc18a78 100644
--- a/src/lib/web-select.ts
+++ b/src/lib/web-select.ts
@@ -1,23 +1,23 @@
-import { isDesktop } from "@/lib/transport";
-
-/** Native `<select>` styling override for web mode.
+/** Normalize `<select>` chrome across web and desktop webviews.
  *
- * macOS WebKit and Linux Chromium render native select chrome differently
- * from each other and from Tauri's webview. Apply this `style` plus a
- * matching className to keep `<select>` elements consistent across web /
- * desktop. In Tauri (desktop), returns `undefined` so the native chrome
- * is preserved.
+ * Native macOS Aqua chrome (Tauri's WKWebView on older macOS, e.g.
+ * 15.x Sequoia) renders select controls as heavy Aqua-style buttons that
+ * clash with the rest of the flat UI. Apple's newer macOS releases ship
+ * a flatter native chrome, but we can't rely on that across user OS
+ * versions. Stripping native chrome with `appearance: none` and applying
+ * a matching custom arrow gives a single consistent rendering everywhere.
  */
-export const webSelectStyle: React.CSSProperties | undefined = !isDesktop()
-  ? {
-      appearance: "none",
-      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 1L7 4.5H1Z' fill='%23888'/%3E%3Cpath d='M4 11L1 7.5H7Z' fill='%23888'/%3E%3C/svg%3E")`,
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: "right 8px center",
-      paddingRight: "24px",
-    }
-  : undefined;
+export const webSelectStyle: React.CSSProperties = {
+  WebkitAppearance: "none",
+  appearance: "none",
+  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 1L7 4.5H1Z' fill='%23888'/%3E%3Cpath d='M4 11L1 7.5H7Z' fill='%23888'/%3E%3C/svg%3E")`,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "right 8px center",
+  paddingRight: "24px",
+};
 
-/** True in web mode — used to swap `rounded-[6px] h-[26px]` for the more
- *  permissive Tauri styling (`rounded-lg py-1.5`). */
-export const isWeb = !isDesktop();
+/** Use the normalized layout (`rounded-[6px] h-[26px]`) instead of the
+ *  legacy desktop-only (`rounded-lg py-1.5`). Now true everywhere since
+ *  desktop also normalizes — kept as a constant for callers that gate
+ *  className choice on it; can be inlined later. */
+export const isWeb = true;