Merge pull request #1032 from bluesky-social/fix-1001-modal-scrolling

#1001 Modal content overflow

2 files changed, 8 insertions, 1 deletions

diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index 1f458472c..7eb16290a 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -5,6 +5,7 @@ import {ComposePost} from '../com/composer/Composer'
 import {ComposerOpts} from 'state/models/ui/shell'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isMobileWeb} from 'platform/detection'
+import {BOTTOM_BAR_HEIGHT} from 'view/shell/bottom-bar/BottomBarStyles'
 
 export const Composer = observer(
   ({
@@ -62,7 +63,10 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     paddingHorizontal: 2,
     borderRadius: isMobileWeb ? 0 : 8,
-    marginBottom: '10vh',
+    marginBottom: isMobileWeb ? BOTTOM_BAR_HEIGHT : 0,
     borderWidth: 1,
+    maxHeight: isMobileWeb
+      ? `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`
+      : 'calc(100% - (40px * 2))',
   },
 })
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index f31ab44cf..91d285e47 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -1,8 +1,11 @@
 import {StyleSheet} from 'react-native'
 import {colors} from 'lib/styles'
 
+export const BOTTOM_BAR_HEIGHT = 61
+
 export const styles = StyleSheet.create({
   bottomBar: {
+    height: BOTTOM_BAR_HEIGHT,
     position: 'absolute',
     bottom: 0,
     left: 0,