fix(VoIP): align NewMediaCall sheet layout

app/containers/NewMediaCall/CreateCall.tsx

@@ -56,7 +56,6 @@ export const CreateCall = () => {
 const styles = StyleSheet.create({
 	callButton: {
 		height: 52,
-		marginTop: 32,
 		borderRadius: 4,
 		alignItems: 'center',
 		justifyContent: 'center',

app/containers/NewMediaCall/NewMediaCall.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { PeerList } from './PeerList';
 import { SelectedPeer } from './SelectedPeer';
@@ -11,13 +12,16 @@ import { useTheme } from '../../theme';
 export const NewMediaCall = (): React.ReactElement => {
 	const { colors } = useTheme();
 	const reset = usePeerAutocompleteStore(state => state.reset);
+	const { bottom } = useSafeAreaInsets();
 	useEffect(() => () => reset(), [reset]);
 
 	return (
-		<View style={[styles.screen, { backgroundColor: colors.surfaceLight }]}>
-			<FilterHeader />
-			<SelectedPeer />
-			<PeerList />
+		<View style={[styles.screen, { backgroundColor: colors.surfaceLight, paddingBottom: bottom + 16 }]}>
+			<View style={styles.content}>
+				<FilterHeader />
+				<SelectedPeer />
+				<PeerList />
+			</View>
 			<CreateCall />
 		</View>
 	);
@@ -26,7 +30,11 @@ export const NewMediaCall = (): React.ReactElement => {
 const styles = StyleSheet.create({
 	screen: {
 		flex: 1,
+		justifyContent: 'space-between',
 		paddingHorizontal: 16,
 		paddingTop: 16
+	},
+	content: {
+		flex: 1
 	}
 });

app/containers/NewMediaCall/PeerList.tsx

@@ -1,4 +1,4 @@
-import { FlatList } from 'react-native';
+import { FlatList, StyleSheet } from 'react-native';
 
 import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
 import { PeerItem } from './PeerItem';
@@ -21,6 +21,7 @@ export const PeerList = () => {
 	return (
 		<FlatList
 			data={options}
+			style={styles.list}
 			contentContainerStyle={{ flexShrink: 1 }}
 			keyExtractor={item => `${item.type}:${item.value}`}
 			keyboardShouldPersistTaps='always'
@@ -29,3 +30,9 @@ export const PeerList = () => {
 		/>
 	);
 };
+
+const styles = StyleSheet.create({
+	list: {
+		flex: 1
+	}
+});

app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap

@@ -42,7 +42,6 @@ exports[`Story Snapshots: Disabled should match snapshot 1`] = `
         "gap": 4,
         "height": 52,
         "justifyContent": "center",
-        "marginTop": 32,
       },
       {
         "backgroundColor": "#C0F6E4",
@@ -141,7 +140,6 @@ exports[`Story Snapshots: Enabled should match snapshot 1`] = `
         "gap": 4,
         "height": 52,
         "justifyContent": "center",
-        "marginTop": 32,
       },
       {
         "backgroundColor": "#158D65",

app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap

@@ -64,6 +64,11 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     renderItem={[Function]}
     scrollEventThrottle={0.0001}
     stickyHeaderIndices={[]}
+    style={
+      {
+        "flex": 1,
+      }
+    }
     viewabilityConfigCallbackPairs={[]}
   >
     <View>

app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
+import { useWindowDimensions } from 'react-native';
 
 import { NewMediaCall } from '../../../containers/NewMediaCall';
 import { showActionSheetRef } from '../../../containers/ActionSheet';
 import { getUidDirectMessage } from '../../methods/helpers/helpers';
+import { isTablet } from '../../methods/helpers/deviceInfo';
 import { usePeerAutocompleteStore } from '../../services/voip/usePeerAutocompleteStore';
 import { useSubscription } from '../useSubscription';
 import { useMediaCallPermission } from '../useMediaCallPermission';
 
 export const useNewMediaCall = (rid?: string) => {
 	const room = useSubscription(rid);
 	const hasMediaCallPermission = useMediaCallPermission();
+	const { width, height } = useWindowDimensions();
+	const isLandscape = width > height;
 
 	const openNewMediaCall = () => {
 		if (room) {
@@ -18,12 +22,15 @@ export const useNewMediaCall = (rid?: string) => {
 				usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: otherUserId, label: room.name });
 			}
 		}
+		// fullContainer forces a min inner height equal to the snap fraction of window height.
+		// On iPad or iPhone landscape the sheet should hug its content instead.
+		const fullContainer = !isTablet && !isLandscape;
 		showActionSheetRef({
 			children: <NewMediaCall />,
 			portraitSnaps: ['60%'],
 			landscapeSnaps: ['90%'],
 			enableContentPanningGesture: false,
-			fullContainer: true
+			fullContainer
 		});
 	};