diff options
| author | dan <dan.abramov@gmail.com> | 2024-12-12 15:35:56 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-12-12 15:35:56 +0000 |
| commit | 88166926fa64c7dd7924a3a8100056175c5f989b (patch) | |
| tree | 6d20736ea725124a5e0485b45f4b6d59b7ad18b7 /src/view/com/pager/TabBar.web.tsx | |
| parent | 704e36c2801c4c06a3763eaef90c6a3e532a326d (diff) | |
| download | voidsky-88166926fa64c7dd7924a3a8100056175c5f989b.tar.zst | |
Make the pager take full width (#7066)
* Wide tabs for web * Wide tabs on mobile * Tweak min for profile * Driveby border fix * Fix single tab indicator
Diffstat (limited to 'src/view/com/pager/TabBar.web.tsx')
| -rw-r--r-- | src/view/com/pager/TabBar.web.tsx | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/src/view/com/pager/TabBar.web.tsx b/src/view/com/pager/TabBar.web.tsx index 789f88e75..f44e03368 100644 --- a/src/view/com/pager/TabBar.web.tsx +++ b/src/view/com/pager/TabBar.web.tsx @@ -115,12 +115,14 @@ export function TabBar({ hoverStyle={t.atoms.bg_contrast_25} onPress={() => onPressItem(i)} accessibilityRole="tab"> - <View style={[styles.itemInner, selected && indicatorStyle]}> + <View style={styles.itemInner}> <Text emoji testID={testID ? `${testID}-${item}` : undefined} style={[ + styles.itemText, selected ? t.atoms.text : t.atoms.text_contrast_medium, + selected && indicatorStyle, a.text_md, a.font_bold, {lineHeight: 20}, @@ -143,15 +145,23 @@ const desktopStyles = StyleSheet.create({ width: 598, }, contentContainer: { + flexGrow: 1, paddingHorizontal: 0, backgroundColor: 'transparent', }, item: { + flexGrow: 1, + alignItems: 'stretch', paddingTop: 14, paddingHorizontal: 14, justifyContent: 'center', }, itemInner: { + alignItems: 'center', + }, + itemText: { + textAlign: 'center', + minWidth: 45, paddingBottom: 12, borderBottomWidth: 3, borderBottomColor: 'transparent', @@ -170,15 +180,24 @@ const mobileStyles = StyleSheet.create({ flexDirection: 'row', }, contentContainer: { + flexGrow: 1, backgroundColor: 'transparent', paddingHorizontal: 6, }, item: { + flexGrow: 1, + alignItems: 'stretch', paddingTop: 10, paddingHorizontal: 10, justifyContent: 'center', }, itemInner: { + flexGrow: 1, + alignItems: 'center', + }, + itemText: { + textAlign: 'center', + minWidth: 45, paddingBottom: 10, borderBottomWidth: 2, borderBottomColor: 'transparent', |