Merge pull request #346 from StroepWafel/Fix-dropdowns

fix: Drop down menu styling

src/css/injected.scss

@@ -38,6 +38,21 @@ body,
 html {
   font-family: Rubik, sans-serif !important;
 }
+
+/* Ensure native select dropdowns are readable on Windows */
+select option {
+  background-color: #ffffff !important;
+  color: #111827 !important;
+}
+.dark select option {
+  background-color: #1f2937 !important;
+  color: #ffffff !important;
+}
+
+/* Consistent rounded corners for selects */
+select {
+  border-radius: 8px !important;
+}
 #container {
   transition: 200ms;
   background: var(--auto-background) !important;

src/interface/components/Select.svelte

@@ -8,12 +8,12 @@
   let select: HTMLSelectElement;
 </script>
 
-<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-lg w-full overflow-clip">
+<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-xl w-full overflow-clip">
   <select
     bind:this={select}
     value={state}
     onchange={() => onChange(select.value)}
-    class="px-4 py-1 text-[0.75rem] dark:text-white w-full border-none bg-transparent focus:ring-0 focus:bg-white/20 dark:focus:bg-black/10"
+    class="px-4 py-2 pr-9 text-[0.875rem] font-medium text-black dark:text-white w-full border-none bg-white/80 dark:bg-zinc-800/70 hover:bg-white/90 dark:hover:bg-zinc-800/80 focus:bg-white/90 dark:focus:bg-zinc-800/80 focus:ring-0 rounded-md appearance-none transition-colors"
   >
     {#each options as option}
       <option value={option.value}>
@@ -22,3 +22,19 @@
     {/each}
   </select>
 </div>
+
+<style>
+  /* Make native dropdown list readable on Windows */
+  select option {
+    background-color: #ffffff;
+    color: #111827; /* zinc-900 */
+  }
+  :global(.dark) select option {
+    background-color: #1f2937; /* zinc-800 */
+    color: #ffffff;
+  }
+
+  :global(.dark) div::after {
+    color: rgba(255, 255, 255, 0.6);
+  }
+</style>