From a71f96a5275ce43e045adfb8003a407ed6fd36e8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 8 Dec 2023 02:03:54 +0000
Subject: [PATCH] Fix more layout

---
 src/view/com/util/SimpleViewHeader.tsx | 16 +++++++++++++++-
 src/view/com/util/Views.web.tsx        | 12 +++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/view/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx
index e86e375651..814b2fb15d 100644
--- a/src/view/com/util/SimpleViewHeader.tsx
+++ b/src/view/com/util/SimpleViewHeader.tsx
@@ -14,6 +14,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {useSetDrawerOpen} from '#/state/shell'
+import {isWeb} from '#/platform/detection'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -47,7 +48,14 @@ export function SimpleViewHeader({
 
   const Container = isMobile ? View : CenteredView
   return (
-    <Container style={[styles.header, isMobile && styles.headerMobile, style]}>
+    <Container
+      style={[
+        styles.header,
+        isMobile && styles.headerMobile,
+        isWeb && styles.headerWeb,
+        pal.view,
+        style,
+      ]}>
       {showBackButton ? (
         <TouchableOpacity
           testID="viewHeaderDrawerBtn"
@@ -89,6 +97,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
   },
+  headerWeb: {
+    // @ts-ignore web-only
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+  },
   backBtn: {
     width: 30,
     height: 30,
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 9b37b20142..1e661dee59 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -63,6 +63,7 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
     onScroll,
     ListHeaderComponent,
     ListFooterComponent,
+    desktopFixedHeight,
     ...props
   }: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
   ref: React.Ref<Animated.FlatList<ItemT>>,
@@ -161,7 +162,12 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
   return (
     <Animated.ScrollView {...props} style={style} ref={nativeRef}>
       <View
-        style={[styles.contentContainer, contentContainerStyle, pal.border]}>
+        style={[
+          styles.contentContainer,
+          contentContainerStyle,
+          desktopFixedHeight ? styles.minHeightViewport : null,
+          pal.border,
+        ]}>
         {header}
         {(data as Array<ItemT>).map((item, index) => (
           <Row<ItemT>
@@ -287,4 +293,8 @@ const styles = StyleSheet.create({
     // @ts-ignore web
     contentVisibility: 'auto',
   },
+  minHeightViewport: {
+    // @ts-ignore web only
+    minHeight: '100vh',
+  },
 })