From c3b4ce4378e54bf0228e6fd7072fba85e4c6f3d6 Mon Sep 17 00:00:00 2001
From: Hailey <153161762+haileyok@users.noreply.github.com>
Date: Tue, 30 Jan 2024 17:46:44 -0800
Subject: adjust height of list based on screen size (#2678)

---
 src/view/com/modals/UserAddRemoveLists.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

(limited to 'src/view/com/modals/UserAddRemoveLists.tsx')

diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx
index 23adbe1a8..8452f2513 100644
--- a/src/view/com/modals/UserAddRemoveLists.tsx
+++ b/src/view/com/modals/UserAddRemoveLists.tsx
@@ -1,5 +1,10 @@
 import React, {useCallback} from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {Text} from '../util/text/Text'
 import {UserAvatar} from '../util/UserAvatar'
@@ -10,7 +15,7 @@ import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isWeb, isAndroid} from 'platform/detection'
+import {isWeb, isAndroid, isMobileWeb} from 'platform/detection'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
@@ -41,6 +46,7 @@ export function Component({
 }) {
   const {closeModal} = useModalControls()
   const pal = usePalette('default')
+  const {height: screenHeight} = useWindowDimensions()
   const {_} = useLingui()
   const {data: memberships} = useDangerousListMembershipsQuery()
 
@@ -48,6 +54,16 @@ export function Component({
     closeModal()
   }, [closeModal])
 
+  const listStyle = React.useMemo(() => {
+    if (isMobileWeb) {
+      return [pal.border, {height: screenHeight / 2}]
+    } else if (isWeb) {
+      return [pal.border, {height: screenHeight / 1.5}]
+    }
+
+    return [pal.border, {flex: 1}]
+  }, [pal.border, screenHeight])
+
   return (
     <View testID="userAddRemoveListsModal" style={s.hContentRegion}>
       <Text style={[styles.title, pal.text]}>
@@ -68,7 +84,7 @@ export function Component({
             onRemove={onRemove}
           />
         )}
-        style={[styles.list, pal.border]}
+        style={listStyle}
       />
       <View style={[styles.btns, pal.border]}>
         <Button
-- 
cgit 1.4.1

