From 4aa6d74d4533106e09e306ffce21e14cd3802c3e Mon Sep 17 00:00:00 2001
From: Andrew Hexen <SyberHexen@gmail.com>
Date: Wed, 19 Aug 2026 07:46:49 -0700
Subject: [PATCH] settings: fix unreadable dropdowns (Linux)

---
 .../src/views/settings/configuration.tsx      | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/views/settings/configuration.tsx b/apps/desktop/src/views/settings/configuration.tsx
index bebe410e..4a1de0e3 100644
--- a/apps/desktop/src/views/settings/configuration.tsx
+++ b/apps/desktop/src/views/settings/configuration.tsx
@@ -77,7 +77,13 @@ export const Configuration = () => {
 
             await emit("config_update", await Config.getConfig());
           }}
-          className="w-40 p-1 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer"
+          className="w-40 p-1 pr-8 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer appearance-none bg-no-repeat"
+          style={{
+            backgroundImage:
+              "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")",
+            backgroundPosition: "right 0.5rem center",
+            backgroundSize: "12px",
+          }}
         >
           <option value="left" className="bg-zinc-800 text-white">
             Left
@@ -106,7 +112,13 @@ export const Configuration = () => {
 
             await emit("config_update", await Config.getConfig());
           }}
-          className="w-40 p-1 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer"
+          className="w-40 p-1 pr-8 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer appearance-none bg-no-repeat"
+          style={{
+            backgroundImage:
+              "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")",
+            backgroundPosition: "right 0.5rem center",
+            backgroundSize: "12px",
+          }}
         >
           <option value="top" className="bg-zinc-800 text-white">
             Top
@@ -132,7 +144,13 @@ export const Configuration = () => {
 
             await emit("config_update", await Config.getConfig());
           }}
-          className="p-1 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer"
+          className="p-1 pr-8 rounded border bg-zinc-800 text-white outline-none focus:ring-0 cursor-pointer appearance-none bg-no-repeat"
+          style={{
+            backgroundImage:
+              "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")",
+            backgroundPosition: "right 0.5rem center",
+            backgroundSize: "12px",
+          }}
         >
           <option value="all" className="bg-zinc-800 text-white">
             Everything