From 33e2ad7aa544f4dce7854c532a47bf4a1f6e64cd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 1 Dec 2024 20:17:50 +0000
Subject: [PATCH] wide

---
 src/view/com/pager/TabBar.tsx     | 8 ++++++--
 src/view/com/pager/TabBar.web.tsx | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index e7e4d692b8..c88837a5f2 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -287,7 +287,7 @@ export function TabBar({
           onLayout={e => {
             contentSize.set(e.nativeEvent.layout.width)
           }}
-          style={{flexDirection: 'row'}}>
+          style={{flexDirection: 'row', flexGrow: 1}}>
           {items.map((item, i) => {
             return (
               <TabBarItem
@@ -359,7 +359,7 @@ function TabBarItem({
   )
 
   return (
-    <View onLayout={handleLayout}>
+    <View onLayout={handleLayout} style={{flexGrow: 1}}>
       <PressableWithHover
         testID={`${testID}-selector-${index}`}
         style={styles.item}
@@ -385,15 +385,19 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   contentContainer: {
+    flexGrow: 1,
     backgroundColor: 'transparent',
     paddingHorizontal: CONTENT_PADDING,
   },
   item: {
+    flexGrow: 1,
     paddingTop: 10,
     paddingHorizontal: ITEM_PADDING,
     justifyContent: 'center',
   },
   itemInner: {
+    alignItems: 'center',
+    flexGrow: 1,
     paddingBottom: 10,
     borderBottomWidth: 3,
     borderBottomColor: 'transparent',
diff --git a/src/view/com/pager/TabBar.web.tsx b/src/view/com/pager/TabBar.web.tsx
index 4291a053b5..8783ac2726 100644
--- a/src/view/com/pager/TabBar.web.tsx
+++ b/src/view/com/pager/TabBar.web.tsx
@@ -142,15 +142,19 @@ 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',
     paddingBottom: 12,
     borderBottomWidth: 3,
     borderBottomColor: 'transparent',
@@ -169,15 +173,20 @@ 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',
     paddingBottom: 10,
     borderBottomWidth: 3,
     borderBottomColor: 'transparent',