adjust height of list based on screen size (#2678)

zio/stable
Hailey 2024-01-30 17:46:44 -08:00 committed by GitHub
parent 45291f17a0
commit c3b4ce4378
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 3 deletions

View File

@ -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