diff options
| author | Mary <148872143+mary-ext@users.noreply.github.com> | 2024-04-19 04:21:09 +0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-18 14:21:09 -0700 |
| commit | 08c60147510e81821e0c6b8346133b642abf2c78 (patch) | |
| tree | 34ce230e80adc145039d106ed51c75e3aa948595 /src | |
| parent | 3beb4ec63d561906b3e6816378af126bb9d04cfc (diff) | |
| download | voidsky-08c60147510e81821e0c6b8346133b642abf2c78.tar.zst | |
Fix splash screen language picker appearance on Chrome (#2952)
* fix: correct language picker appearance on Chrome * fix: prevent chevron shrink on long language names
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppLanguageDropdown.web.tsx | 36 |
1 files changed, 20 insertions, 16 deletions
diff --git a/src/components/AppLanguageDropdown.web.tsx b/src/components/AppLanguageDropdown.web.tsx index aea1b2b90..c3c8575a1 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}> |