adjust height of list based on screen size (#2678)
parent
45291f17a0
commit
c3b4ce4378
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue