Give minWidth to tab indicator only (#7095)

src/view/com/pager/TabBar.web.tsx

@@ -25,16 +25,12 @@ export function TabBar({
   testID,
   selectedPage,
   items,
-  indicatorColor,
   onSelect,
   onPressSelected,
 }: TabBarProps) {
   const t = useTheme()
   const scrollElRef = useRef<ScrollView>(null)
   const itemRefs = useRef<Array<Element>>([])
-  const indicatorStyle = {
-    borderBottomColor: indicatorColor || t.palette.primary_500,
-  }
   const {gtMobile} = useBreakpoints()
   const styles = gtMobile ? desktopStyles : mobileStyles
 
@@ -122,12 +118,19 @@ export function TabBar({
                   style={[
                     styles.itemText,
                     selected ? t.atoms.text : t.atoms.text_contrast_medium,
-                    selected && indicatorStyle,
                     a.text_md,
                     a.font_bold,
                     {lineHeight: 20},
                   ]}>
                   {item}
+                  <View
+                    style={[
+                      styles.itemIndicator,
+                      selected && {
+                        backgroundColor: t.palette.primary_500,
+                      },
+                    ]}
+                  />
                 </Text>
               </View>
             </PressableWithHover>
@@ -158,13 +161,20 @@ const desktopStyles = StyleSheet.create({
   },
   itemInner: {
     alignItems: 'center',
+    overflowX: 'hidden',
   },
   itemText: {
     textAlign: 'center',
+    paddingBottom: 10 + 3,
+  },
+  itemIndicator: {
+    position: 'absolute',
+    bottom: 0,
+    height: 3,
+    left: '50%',
+    transform: 'translateX(-50%)',
     minWidth: 45,
-    paddingBottom: 12,
-    borderBottomWidth: 3,
-    borderBottomColor: 'transparent',
+    width: '100%',
   },
   outerBottomBorder: {
     position: 'absolute',
@@ -194,13 +204,20 @@ const mobileStyles = StyleSheet.create({
   itemInner: {
     flexGrow: 1,
     alignItems: 'center',
+    overflowX: 'hidden',
   },
   itemText: {
     textAlign: 'center',
+    paddingBottom: 10 + 3,
+  },
+  itemIndicator: {
+    position: 'absolute',
+    bottom: 0,
+    height: 3,
+    left: '50%',
+    transform: 'translateX(-50%)',
     minWidth: 45,
-    paddingBottom: 10,
-    borderBottomWidth: 3,
-    borderBottomColor: 'transparent',
+    width: '100%',
   },
   outerBottomBorder: {
     position: 'absolute',