Fix sizing on smaller phones

7 files changed, 32 insertions, 21 deletions

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index f3b18491c..39b5a5ad0 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -222,7 +222,7 @@ PODS:
     - glog
   - react-native-pager-view (6.0.2):
     - React-Core
-  - react-native-safe-area-context (4.3.4):
+  - react-native-safe-area-context (4.4.1):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -495,7 +495,7 @@ SPEC CHECKSUMS:
   React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8
   React-logger: a0833912d93b36b791b7a521672d8ee89107aff1
   react-native-pager-view: 592421df0259bf7a7a4fe85b74c24f3f39905605
-  react-native-safe-area-context: dfe5aa13bee37a0c7e8059d14f72ffc076d120e9
+  react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
   react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
   React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6
   React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162
diff --git a/package.json b/package.json
index f7694dac5..5deef78fd 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "react-native-reanimated": "^2.9.1",
     "react-native-root-siblings": "^4.1.1",
     "react-native-root-toast": "^3.4.0",
-    "react-native-safe-area-context": "^4.3.1",
+    "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.13.1",
     "react-native-splash-screen": "^3.3.0",
     "react-native-svg": "^12.4.0",
diff --git a/src/App.native.tsx b/src/App.native.tsx
index e6be77225..3d3e5f1b0 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -3,6 +3,7 @@ import React, {useState, useEffect} from 'react'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import SplashScreen from 'react-native-splash-screen'
+import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {whenWebCrypto} from './platform/polyfills.native'
 import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
@@ -35,7 +36,9 @@ function App() {
     <GestureHandlerRootView style={{flex: 1}}>
       <RootSiblingParent>
         <RootStoreProvider value={rootStore}>
-          <MobileShell />
+          <SafeAreaProvider>
+            <MobileShell />
+          </SafeAreaProvider>
         </RootStoreProvider>
       </RootSiblingParent>
     </GestureHandlerRootView>
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index a9cf74e1c..95dfcbd64 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import React, {useMemo} from 'react'
+import {StyleSheet, useWindowDimensions, Text, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Link} from '../util/Link'
 import {PostDropdownBtn} from '../util/DropdownBtn'
@@ -16,11 +16,16 @@ interface PostMetaOpts {
 }
 
 export function PostMeta(opts: PostMetaOpts) {
+  const winDim = useWindowDimensions()
+  const maxWidth = useMemo(
+    () => ({maxWidth: ((winDim.width * 3) / 5) | 0}),
+    [winDim.width],
+  )
   return (
     <View style={styles.meta}>
-      <View style={styles.metaNames}>
+      <View style={[styles.metaNames, maxWidth]}>
         <Link
-          style={styles.metaItem}
+          style={[styles.metaItem, maxWidth]}
           href={opts.authorHref}
           title={opts.authorHandle}>
           <Text style={[s.f17, s.bold]} numberOfLines={1}>
@@ -28,7 +33,7 @@ export function PostMeta(opts: PostMetaOpts) {
           </Text>
         </Link>
         <Link
-          style={styles.metaItem}
+          style={[styles.metaItem, maxWidth]}
           href={opts.authorHref}
           title={opts.authorHandle}>
           <Text style={[s.f15, s.gray5]} numberOfLines={1}>
@@ -37,7 +42,7 @@ export function PostMeta(opts: PostMetaOpts) {
         </Link>
       </View>
       <Text style={[styles.metaItem, s.f15, s.gray5]}>
-        &middot; {ago(opts.timestamp)}
+        {ago(opts.timestamp)}
       </Text>
       <View style={s.flex1} />
       <PostDropdownBtn
@@ -61,11 +66,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     alignItems: 'center',
-    maxWidth: 240,
     overflow: 'hidden',
   },
   metaItem: {
-    maxWidth: 240,
     paddingRight: 5,
   },
 })
diff --git a/src/view/shell/mobile/MainMenu.tsx b/src/view/shell/mobile/MainMenu.tsx
index 874b8786f..d05e70a81 100644
--- a/src/view/shell/mobile/MainMenu.tsx
+++ b/src/view/shell/mobile/MainMenu.tsx
@@ -8,6 +8,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -27,6 +28,7 @@ export const MainMenu = observer(
   ({active, onClose}: {active: boolean; onClose: () => void}) => {
     const store = useStores()
     const initInterp = useSharedValue<number>(0)
+    const insets = useSafeAreaInsets()
 
     useEffect(() => {
       if (active) {
@@ -167,7 +169,12 @@ export const MainMenu = observer(
         <TouchableWithoutFeedback onPress={onClose}>
           <View style={styles.bg} />
         </TouchableWithoutFeedback>
-        <Animated.View style={[styles.wrapper, wrapperAnimStyle]}>
+        <Animated.View
+          style={[
+            styles.wrapper,
+            {bottom: insets.bottom + 55},
+            wrapperAnimStyle,
+          ]}>
           <SafeAreaView>
             <View style={[styles.topSection]}>
               <TouchableOpacity
@@ -251,7 +258,6 @@ const styles = StyleSheet.create({
   wrapper: {
     position: 'absolute',
     top: 0,
-    bottom: 75,
     width: '100%',
     backgroundColor: '#fff',
   },
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 96390e9b8..94407599f 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -220,7 +220,7 @@ export const MobileShell: React.FC = observer(() => {
           </ScreenContainer>
         </GestureDetector>
       </SafeAreaView>
-      <View style={styles.bottomBar}>
+      <SafeAreaView style={styles.bottomBar}>
         <Btn icon="house" onPress={onPressHome} />
         <Btn icon="search" onPress={onPressSearch} />
         <Btn icon="menu" onPress={onPressMenu} />
@@ -230,7 +230,7 @@ export const MobileShell: React.FC = observer(() => {
           notificationCount={store.me.notificationCount}
         />
         <Btn icon={['far', 'clone']} onPress={onPressTabs} />
-      </View>
+      </SafeAreaView>
       <MainMenu
         active={isMainMenuActive}
         onClose={() => setMainMenuActive(false)}
@@ -373,7 +373,6 @@ const styles = StyleSheet.create({
     borderTopColor: colors.gray2,
     paddingLeft: 5,
     paddingRight: 15,
-    paddingBottom: 20,
   },
   ctrl: {
     flex: 1,
diff --git a/yarn.lock b/yarn.lock
index 0dd3f04a4..6d3d750f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10233,10 +10233,10 @@ react-native-root-toast@^3.4.0:
     prop-types "^15.5.10"
     react-native-root-siblings "^4.0.0"
 
-react-native-safe-area-context@^4.3.1:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.4.tgz#79060fcc02ef38d6fd7afdf87b2301b06bd99fe9"
-  integrity sha512-4dFZPDHRigZ+uw8HCmMLyC/IT1BG0B9QLvuwsBQAMDCRSrxISIYza9VIbsIn2FGvZiQ1gOoXBHDmy9WFihQsTg==
+react-native-safe-area-context@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
+  integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==
 
 react-native-screens@^3.13.1:
   version "3.17.0"