Merge pull request #273 from CSSLab/codex/fix-edge-maia-opponent-options

fix: make maia opponent dropdown readable in Edge

Author: ashtonanderson

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) => (

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) => (

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}>

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));