1 files changed, 11 insertions, 91 deletions

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 4e8646c60..3f453971c 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -2,11 +2,8 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {Text} from '../util/text/Text'
-import {DraggableScrollView} from './DraggableScrollView'
 
 export interface TabBarProps {
   testID?: string
@@ -31,68 +28,20 @@ export function TabBar({
 }: TabBarProps) {
   const pal = usePalette('default')
   const scrollElRef = useRef<ScrollView>(null)
-  const itemRefs = useRef<Array<Element>>([])
   const [itemXs, setItemXs] = useState<number[]>([])
   const indicatorStyle = useMemo(
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
     [indicatorColor, pal],
   )
-  const {isDesktop, isTablet} = useWebMediaQueries()
-  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
 
   useEffect(() => {
-    if (isNative) {
-      // On native, the primary interaction is swiping.
-      // We adjust the scroll little by little on every tab change.
-      // Scroll into view but keep the end of the previous item visible.
-      let x = itemXs[selectedPage] || 0
-      x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
-      scrollElRef.current?.scrollTo({x})
-    } else {
-      // On the web, the primary interaction is tapping.
-      // Scrolling under tap feels disorienting so only adjust the scroll offset
-      // when tapping on an item out of view--and we adjust by almost an entire page.
-      const parent = scrollElRef?.current?.getScrollableNode?.()
-      if (!parent) {
-        return
-      }
-      const parentRect = parent.getBoundingClientRect()
-      if (!parentRect) {
-        return
-      }
-      const {
-        left: parentLeft,
-        right: parentRight,
-        width: parentWidth,
-      } = parentRect
-      const child = itemRefs.current[selectedPage]
-      if (!child) {
-        return
-      }
-      const childRect = child.getBoundingClientRect?.()
-      if (!childRect) {
-        return
-      }
-      const {left: childLeft, right: childRight, width: childWidth} = childRect
-      let dx = 0
-      if (childRight >= parentRight) {
-        dx += childRight - parentRight
-        dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
-      } else if (childLeft <= parentLeft) {
-        dx -= parentLeft - childLeft
-        dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH
-      }
-      let x = parent.scrollLeft + dx
-      x = Math.max(0, x)
-      x = Math.min(x, parent.scrollWidth - parentWidth)
-      if (dx !== 0) {
-        parent.scroll({
-          left: x,
-          behavior: 'smooth',
-        })
-      }
-    }
-  }, [scrollElRef, itemXs, selectedPage, styles])
+    // On native, the primary interaction is swiping.
+    // We adjust the scroll little by little on every tab change.
+    // Scroll into view but keep the end of the previous item visible.
+    let x = itemXs[selectedPage] || 0
+    x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
+    scrollElRef.current?.scrollTo({x})
+  }, [scrollElRef, itemXs, selectedPage])
 
   const onPressItem = useCallback(
     (index: number) => {
@@ -122,7 +71,7 @@ export function TabBar({
       testID={testID}
       style={[pal.view, styles.outer]}
       accessibilityRole="tablist">
-      <DraggableScrollView
+      <ScrollView
         testID={`${testID}-selector`}
         horizontal={true}
         showsHorizontalScrollIndicator={false}
@@ -134,7 +83,6 @@ export function TabBar({
             <PressableWithHover
               testID={`${testID}-selector-${i}`}
               key={`${item}-${i}`}
-              ref={node => (itemRefs.current[i] = node as any)}
               onLayout={e => onItemLayout(e, i)}
               style={styles.item}
               hoverStyle={pal.viewLight}
@@ -143,7 +91,7 @@ export function TabBar({
               <View style={[styles.itemInner, selected && indicatorStyle]}>
                 <Text
                   emoji
-                  type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
+                  type="lg-bold"
                   testID={testID ? `${testID}-${item}` : undefined}
                   style={[
                     selected ? pal.text : pal.textLight,
@@ -155,41 +103,13 @@ export function TabBar({
             </PressableWithHover>
           )
         })}
-      </DraggableScrollView>
+      </ScrollView>
       <View style={[pal.border, styles.outerBottomBorder]} />
     </View>
   )
 }
 
-const desktopStyles = StyleSheet.create({
-  outer: {
-    flexDirection: 'row',
-    width: 598,
-  },
-  contentContainer: {
-    paddingHorizontal: 0,
-    backgroundColor: 'transparent',
-  },
-  item: {
-    paddingTop: 14,
-    paddingHorizontal: 14,
-    justifyContent: 'center',
-  },
-  itemInner: {
-    paddingBottom: 12,
-    borderBottomWidth: 3,
-    borderBottomColor: 'transparent',
-  },
-  outerBottomBorder: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: '100%',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-})
-
-const mobileStyles = StyleSheet.create({
+const styles = StyleSheet.create({
   outer: {
     flexDirection: 'row',
   },