From 9d8414026135328e690f477f565d85b423b9c0a4 Mon Sep 17 00:00:00 2001
From: Ashton Anderson <ashton@cs.toronto.edu>
Date: Sat, 28 Mar 2026 11:11:12 -0400
Subject: [PATCH] fix: make maia opponent dropdown readable in edge

---
 src/components/Common/GameInfo.tsx                | 2 +-
 src/components/Common/PlaySetupModal.tsx          | 4 ++--
 src/components/Openings/OpeningSelectionModal.tsx | 4 ++--
 src/styles/tailwind.css                           | 7 +++++++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Common/GameInfo.tsx b/src/components/Common/GameInfo.tsx
index b0d67560..f6e14381 100644
--- a/src/components/Common/GameInfo.tsx
+++ b/src/components/Common/GameInfo.tsx
@@ -82,7 +82,7 @@ export const GameInfo: React.FC<Props> = ({
                   <select
                     ref={maiaSelectRef}
                     value={currentMaiaModel}
-                    className="cursor-pointer appearance-none bg-transparent leading-none focus:outline-none"
+                    className="maia-native-select cursor-pointer appearance-none bg-transparent leading-none focus:outline-none"
                     onChange={(e) => setCurrentMaiaModel(e.target.value)}
                   >
                     {MAIA_MODELS?.map((model) => (
diff --git a/src/components/Common/PlaySetupModal.tsx b/src/components/Common/PlaySetupModal.tsx
index 5c518b24..f1526338 100644
--- a/src/components/Common/PlaySetupModal.tsx
+++ b/src/components/Common/PlaySetupModal.tsx
@@ -297,7 +297,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                       <select
                         id="partner-select"
                         value={maiaPartnerVersion}
-                        className="w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
+                        className="maia-native-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
                         onChange={(e) => setMaiaPartnerVersion(e.target.value)}
                       >
                         {maiaOptions.map((maia) => (
@@ -327,7 +327,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                   <select
                     id="opponent-select"
                     value={maiaVersion}
-                    className="w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
+                    className="maia-native-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
                     onChange={(e) => setMaiaVersion(e.target.value)}
                   >
                     {maiaOptions.map((maia) => (
diff --git a/src/components/Openings/OpeningSelectionModal.tsx b/src/components/Openings/OpeningSelectionModal.tsx
index 963ce06a..99b83fdc 100644
--- a/src/components/Openings/OpeningSelectionModal.tsx
+++ b/src/components/Openings/OpeningSelectionModal.tsx
@@ -1121,7 +1121,7 @@ const DrillStudioPanel: React.FC<{
                       setSelectedMaiaVersion(version)
                     }
                   }}
-                  className="w-full rounded-md border border-white/[0.08] bg-white/[0.06] px-2.5 py-[8px] text-[14px] text-white/90 focus:outline-none"
+                  className="maia-native-select w-full rounded-md border border-white/[0.08] bg-white/[0.06] px-2.5 py-[8px] text-[14px] text-white/90 focus:outline-none"
                 >
                   {MAIA3_OPPONENT_RATINGS.map((version) => (
                     <option key={version.id} value={version.id}>
@@ -1402,7 +1402,7 @@ const SelectedPanel: React.FC<{
               setSelectedMaiaVersion(version)
             }
           }}
-          className="w-full rounded border border-glass-border bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
+          className="maia-native-select w-full rounded border border-glass-border bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
         >
           {MAIA3_OPPONENT_RATINGS.map((version) => (
             <option key={version.id} value={version.id}>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 6e101881..602e3356 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -185,6 +185,13 @@ svg {
   background-color: rgb(var(--color-human-accent4));
 }
 
+.maia-native-select option,
+.maia-native-select optgroup {
+  background-color: rgb(255 255 255);
+  color: rgb(17 24 39);
+  -webkit-text-fill-color: rgb(17 24 39);
+}
+
 .spinner {
   border: 4px solid rgb(var(--color-background4));
   border-left-color: rgb(var(--color-human-accent1));