Fix region sizing on web

14 files changed, 25 insertions, 16 deletions

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 72cba0b63..062fc1aa8 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -67,3 +67,5 @@ export const DEV_SUGGESTED_FOLLOWS = ['alice', 'bob', 'carla'].map(
 export const POST_IMG_MAX_WIDTH = 2000
 export const POST_IMG_MAX_HEIGHT = 2000
 export const POST_IMG_MAX_SIZE = 1000000
+
+export const DESKTOP_HEADER_HEIGHT = 57
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index db6c03606..dd3c86910 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -1,5 +1,7 @@
 import {StyleProp, StyleSheet, TextStyle} from 'react-native'
 import {Theme, TypographyVariant} from './ThemeContext'
+import {isDesktopWeb} from 'platform/detection'
+import {DESKTOP_HEADER_HEIGHT} from './constants'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
 export const colors = {
@@ -150,6 +152,9 @@ export const s = StyleSheet.create({
   // dimensions
   w100pct: {width: '100%'},
   h100pct: {height: '100%'},
+  hContentRegion: isDesktopWeb
+    ? {height: `calc(100vh - ${DESKTOP_HEADER_HEIGHT}px)`}
+    : {height: '100%'},
 
   // text align
   textLeft: {textAlign: 'left'},
diff --git a/src/view/com/login/Signin.tsx b/src/view/com/login/Signin.tsx
index 9604a32f3..78b24e68c 100644
--- a/src/view/com/login/Signin.tsx
+++ b/src/view/com/login/Signin.tsx
@@ -482,9 +482,9 @@ const ForgotPasswordForm = ({
   const [email, setEmail] = useState<string>('')
   const {screen} = useAnalytics()
 
-  // useEffect(() => {
-  screen('Signin:ForgotPassword')
-  // }, [screen])
+  useEffect(() => {
+    screen('Signin:ForgotPassword')
+  }, [screen])
 
   const onPressSelectService = () => {
     store.shell.openModal({
diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx
index 5c1ee935b..da48059b8 100644
--- a/src/view/com/notifications/Feed.tsx
+++ b/src/view/com/notifications/Feed.tsx
@@ -81,7 +81,7 @@ export const Feed = observer(function Feed({
   )
 
   return (
-    <View style={s.h100pct}>
+    <View style={s.hContentRegion}>
       <CenteredView>
         {view.isLoading && !data && <NotificationFeedLoadingPlaceholder />}
         {view.hasError && (
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index 0a092c46b..a417012b0 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -95,7 +95,7 @@ export const PostThread = observer(function PostThread({
       onRefresh={onRefresh}
       onLayout={onLayout}
       onScrollToIndexFailed={onScrollToIndexFailed}
-      style={s.h100pct}
+      style={s.hContentRegion}
       contentContainerStyle={s.contentContainer}
     />
   )
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 9a652d389..e7421a26d 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -279,6 +279,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 4,
     marginBottom: 10,
+    paddingBottom: 10,
   },
   outerNoTop: {
     borderTopWidth: 0,
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 3d9abd893..1ffd7844c 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -23,6 +23,7 @@ import {
   ViewProps,
 } from 'react-native'
 import {addStyle, colors} from 'lib/styles'
+import {DESKTOP_HEADER_HEIGHT} from 'lib/constants'
 
 export function CenteredView({
   style,
@@ -78,7 +79,7 @@ const styles = StyleSheet.create({
   },
   containerScroll: {
     width: '100%',
-    height: '100%',
+    height: `calc(100vh - ${DESKTOP_HEADER_HEIGHT}px)`,
     maxWidth: 600,
     marginLeft: 'auto',
     marginRight: 'auto',
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
index 09e3dd46a..52a84c649 100644
--- a/src/view/screens/Debug.tsx
+++ b/src/view/screens/Debug.tsx
@@ -73,7 +73,7 @@ function DebugInner({
   const items = [{currentView}]
 
   return (
-    <View style={[s.h100pct, pal.view]}>
+    <View style={[s.hContentRegion, pal.view]}>
       <ViewHeader title="Debug panel" />
       <ViewSelector
         swipeEnabled
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index b3cdf409e..d11a9fb72 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -90,13 +90,13 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
   }
 
   return (
-    <View style={s.h100pct}>
+    <View style={s.hContentRegion}>
       <Feed
         testID="homeFeed"
         key="default"
         feed={store.me.mainFeed}
         scrollElRef={scrollElRef}
-        style={s.h100pct}
+        style={s.hContentRegion}
         onPressTryAgain={onPressTryAgain}
         onScroll={onMainScroll}
         headerOffset={HEADER_HEIGHT}
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 548b0d564..b046ee1b7 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -76,7 +76,7 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
   }, [visible, store, navIdx, screen, scrollToTop])
 
   return (
-    <View style={s.h100pct}>
+    <View style={s.hContentRegion}>
       <ViewHeader title="Notifications" canGoBack={false} />
       <Feed
         view={store.me.notifications}
diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx
index 4b799468d..e93fcb1ab 100644
--- a/src/view/screens/PostThread.tsx
+++ b/src/view/screens/PostThread.tsx
@@ -49,9 +49,9 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
   }, [visible, store.nav, store.log, store.shell, name, navIdx, view])
 
   return (
-    <View style={s.h100pct}>
+    <View style={s.hContentRegion}>
       <ViewHeader title="Post" />
-      <View style={s.h100pct}>
+      <View style={s.hContentRegion}>
         <PostThreadComponent uri={uri} view={view} />
       </View>
     </View>
diff --git a/src/view/screens/Search.web.tsx b/src/view/screens/Search.web.tsx
index 38f7cefb8..b85ed946e 100644
--- a/src/view/screens/Search.web.tsx
+++ b/src/view/screens/Search.web.tsx
@@ -84,7 +84,7 @@ export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
   }
 
   return (
-    <View style={s.h100pct}>
+    <View style={s.hContentRegion}>
       <ViewHeader title="Explore" />
       <ScrollView
         ref={scrollElRef}
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 437b0f6c6..f5db81127 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -69,9 +69,9 @@ export const Settings = observer(function Settings({
   }
 
   return (
-    <View style={[s.h100pct]} testID="settingsScreen">
+    <View style={[s.hContentRegion]} testID="settingsScreen">
       <ViewHeader title="Settings" />
-      <ScrollView style={s.h100pct}>
+      <ScrollView style={s.hContentRegion}>
         <View style={[s.mt10, s.pl10, s.pr10]}>
           <View style={[s.flexRow]}>
             <Text type="xl-bold" style={pal.text}>
diff --git a/src/view/shell/web/index.tsx b/src/view/shell/web/index.tsx
index b9ae32f27..ae1a526a0 100644
--- a/src/view/shell/web/index.tsx
+++ b/src/view/shell/web/index.tsx
@@ -52,7 +52,7 @@ export const WebShell: React.FC = observer(() => {
       {screenRenderDesc.screens.map(({Com, navIdx, params, key, current}) => (
         <View
           key={key}
-          style={[s.h100pct, current ? styles.visible : styles.hidden]}>
+          style={[s.hContentRegion, current ? styles.visible : styles.hidden]}>
           <ErrorBoundary>
             <Com params={params} navIdx={navIdx} visible={current} />
           </ErrorBoundary>