Merge pull request #4261 from tloncorp/po/tlon-3321-fix-invite-people…

…-height-issue desktop: set a max height on the invite people modal
tloncorp · Dec 6, 2024 · 8d37262 · 8d37262
2 parents bf68409 + 6f5530b
commit 8d37262
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/packages/ui/src/components/ActionSheet.tsx b/packages/ui/src/components/ActionSheet.tsx
@@ -8,7 +8,7 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import { Modal } from 'react-native';
+import { Modal, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   Dialog,
@@ -190,7 +190,18 @@ const ActionSheetHeader = ActionSheetHeaderFrame.styleable(
 
 const ActionSheetContent = YStack.styleable((props, ref) => {
   const contentStyle = useContentStyle();
-  return <YStack {...contentStyle} {...props} ref={ref} />;
+  const { bottom } = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const maxHeight = height - bottom - getTokenValue('$2xl');
+  return (
+    <YStack
+      // prevent the modal from going off screen
+      maxHeight={maxHeight}
+      {...contentStyle}
+      {...props}
+      ref={ref}
+    />
+  );
 });
 
 const ActionSheetScrollableContent = ({

diff --git a/packages/ui/src/components/InviteUsersSheet.tsx b/packages/ui/src/components/InviteUsersSheet.tsx
@@ -32,7 +32,11 @@ const InviteUsersSheetComponent = ({
       snapPoints={[85]}
       snapPointsMode="percent"
     >
-      <ActionSheet.Content flex={1} paddingBottom={bottom}>
+      <ActionSheet.Content
+        // prevent the modal from going off screen
+        flex={1}
+        paddingBottom={bottom}
+      >
         <InviteUsersWidget group={group} onInviteComplete={onInviteComplete} />
       </ActionSheet.Content>
     </ActionSheet>