From 8b23b73aecc87444772bb020cf2dc207651b5986 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 7 Dec 2023 17:14:09 +0000
Subject: [PATCH] position: sticky

---
 src/view/com/pager/PagerWithHeader.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index 5bbd576ae2..29a5a7b5fb 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -256,14 +256,16 @@ let PagerTabBar = ({
     ],
   }))
   return (
-    <Animated.View
-      pointerEvents="box-none"
-      style={[
-        isMobile ? styles.tabBarMobile : styles.tabBarDesktop,
-        isWeb ? null : headerTransform,
-        isWeb ? null : {position: 'absolute'},
-      ]}>
-      <View onLayout={onHeaderOnlyLayout} pointerEvents="box-none">
+    <>
+      <View
+        onLayout={onHeaderOnlyLayout}
+        pointerEvents="box-none"
+        style={{
+          width: '100%',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          width: 598,
+        }}>
         {renderHeader?.()}
       </View>
       <View
@@ -275,7 +277,8 @@ let PagerTabBar = ({
             opacity: isHeaderReady ? 1 : 0,
             pointerEvents: isHeaderReady ? 'auto' : 'none',
           },
-          isWeb ? {position: 'sticky', top: 0} : null,
+          isWeb ? {position: 'sticky', top: 0, zIndex: 1} : null,
+          {width: '100%', marginLeft: 'auto', marginRight: 'auto', width: 598},
         ]}>
         <TabBar
           testID={testID}
@@ -285,7 +288,7 @@ let PagerTabBar = ({
           onPressSelected={onCurrentPageSelected}
         />
       </View>
-    </Animated.View>
+    </>
   )
 }
 PagerTabBar = React.memo(PagerTabBar)
@@ -341,8 +344,6 @@ const styles = StyleSheet.create({
     zIndex: 1,
     top: 0,
     // @ts-ignore Web only -prf
-    left: 'calc(50% - 299px)',
-    width: 598,
   },
 })