diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx index 23adbe1a..8452f251 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 ( @@ -68,7 +84,7 @@ export function Component({ onRemove={onRemove} /> )} - style={[styles.list, pal.border]} + style={listStyle} />