forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix splash screen language picker appearance on Chrome (#2952)
* fix: correct language picker appearance on Chrome
* fix: prevent chevron shrink on long language names
+20
-16
+20
-16
src/components/AppLanguageDropdown.web.tsx
+20
-16
src/components/AppLanguageDropdown.web.tsx
···
42
42
// We don't have hitSlop here to increase the tap region,
43
43
// alternative is negative margins.
44
44
{height: 32, marginVertical: -((32 - 14) / 2)},
45
-
a.flex_row,
46
-
a.gap_sm,
47
-
a.align_center,
48
-
a.flex_shrink,
49
45
]}>
50
-
<Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
51
-
{APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
52
-
</Text>
53
-
<ChevronDown fill={t.atoms.text.color} size="xs" style={a.flex_shrink} />
46
+
<View
47
+
style={[
48
+
a.flex_row,
49
+
a.gap_sm,
50
+
a.align_center,
51
+
a.flex_shrink,
52
+
a.h_full,
53
+
t.atoms.bg,
54
+
]}>
55
+
<Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
56
+
{APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
57
+
</Text>
58
+
<ChevronDown fill={t.atoms.text.color} size="xs" style={a.flex_0} />
59
+
</View>
54
60
55
61
<select
56
62
value={sanitizedLang}
57
63
onChange={onChangeAppLanguage}
58
64
style={{
65
+
fontSize: a.text_sm.fontSize,
66
+
letterSpacing: a.text_sm.letterSpacing,
59
67
cursor: 'pointer',
60
-
MozAppearance: 'none',
61
-
WebkitAppearance: 'none',
62
-
appearance: 'none',
63
68
position: 'absolute',
64
69
inset: 0,
65
-
width: '100%',
66
-
color: 'transparent',
67
-
background: 'transparent',
68
-
border: 0,
69
-
padding: 0,
70
+
opacity: 0,
71
+
color: t.atoms.text.color,
72
+
background: t.atoms.bg.backgroundColor,
73
+
padding: 4,
70
74
}}>
71
75
{APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => (
72
76
<option key={l.code2} value={l.code2}>