Fix region sizing on web

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

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'},

src/view/com/login/Signin.tsx

@@ -482,9 +482,9 @@ const ForgotPasswordForm = ({
   const [email, setEmail] = useState<string>('')
   const {screen} = useAnalytics()
 
-  // useEffect(() => {
+  useEffect(() => {
-  screen('Signin:ForgotPassword')
+    screen('Signin:ForgotPassword')
-  // }, [screen])
+  }, [screen])
 
   const onPressSelectService = () => {
     store.shell.openModal({

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 && (

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}
     />
   )

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,

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',

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

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}

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}

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>

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}

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}>

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>