Give minWidth to tab indicator only (#7095)

2 files changed, 43 insertions, 14 deletions

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index b257559bc..8e89b9c1f 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -237,12 +237,25 @@ export function TabBar({
         opacity: 0,
       }
     }
+
+    function getScaleX(index: number) {
+      const textWidth = textLayoutsValue[index].width
+      const itemWidth = layoutsValue[index].width
+      const minIndicatorWidth = 45
+      const maxIndicatorWidth = itemWidth - 2 * CONTENT_PADDING
+      const indicatorWidth = Math.min(
+        Math.max(minIndicatorWidth, textWidth),
+        maxIndicatorWidth,
+      )
+      return indicatorWidth / contentSize.get()
+    }
+
     if (textLayoutsValue.length === 1) {
       return {
         opacity: 1,
         transform: [
           {
-            scaleX: textLayoutsValue[0].width / contentSize.get(),
+            scaleX: getScaleX(0),
           },
         ],
       }
@@ -261,7 +274,7 @@ export function TabBar({
           scaleX: interpolate(
             dragProgress.get(),
             textLayoutsValue.map((l, i) => i),
-            textLayoutsValue.map(l => l.width / contentSize.get()),
+            textLayoutsValue.map((l, i) => getScaleX(i)),
           ),
         },
       ],
@@ -429,7 +442,6 @@ const styles = StyleSheet.create({
   },
   itemText: {
     lineHeight: 20,
-    minWidth: 45,
     textAlign: 'center',
   },
   outerBottomBorder: {
diff --git a/src/view/com/pager/TabBar.web.tsx b/src/view/com/pager/TabBar.web.tsx
index c83889432..cabd955f0 100644
--- a/src/view/com/pager/TabBar.web.tsx
+++ b/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',