From 08c60147510e81821e0c6b8346133b642abf2c78 Mon Sep 17 00:00:00 2001
From: Mary <148872143+mary-ext@users.noreply.github.com>
Date: Fri, 19 Apr 2024 04:21:09 +0700
Subject: [PATCH] Fix splash screen language picker appearance on Chrome
 (#2952)

* fix: correct language picker appearance on Chrome

* fix: prevent chevron shrink on long language names
---
 src/components/AppLanguageDropdown.web.tsx | 36 ++++++++++++----------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/AppLanguageDropdown.web.tsx b/src/components/AppLanguageDropdown.web.tsx
index aea1b2b900..c3c8575a10 100644
--- a/src/components/AppLanguageDropdown.web.tsx
+++ b/src/components/AppLanguageDropdown.web.tsx
@@ -42,31 +42,35 @@ export function AppLanguageDropdown() {
         // We don't have hitSlop here to increase the tap region,
         // alternative is negative margins.
         {height: 32, marginVertical: -((32 - 14) / 2)},
-        a.flex_row,
-        a.gap_sm,
-        a.align_center,
-        a.flex_shrink,
       ]}>
-      <Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
-        {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
-      </Text>
-      <ChevronDown fill={t.atoms.text.color} size="xs" style={a.flex_shrink} />
+      <View
+        style={[
+          a.flex_row,
+          a.gap_sm,
+          a.align_center,
+          a.flex_shrink,
+          a.h_full,
+          t.atoms.bg,
+        ]}>
+        <Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
+          {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
+        </Text>
+        <ChevronDown fill={t.atoms.text.color} size="xs" style={a.flex_0} />
+      </View>
 
       <select
         value={sanitizedLang}
         onChange={onChangeAppLanguage}
         style={{
+          fontSize: a.text_sm.fontSize,
+          letterSpacing: a.text_sm.letterSpacing,
           cursor: 'pointer',
-          MozAppearance: 'none',
-          WebkitAppearance: 'none',
-          appearance: 'none',
           position: 'absolute',
           inset: 0,
-          width: '100%',
-          color: 'transparent',
-          background: 'transparent',
-          border: 0,
-          padding: 0,
+          opacity: 0,
+          color: t.atoms.text.color,
+          background: t.atoms.bg.backgroundColor,
+          padding: 4,
         }}>
         {APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => (
           <option key={l.code2} value={l.code2}>