feat: action sheet bottom blank space

.maestro/tests/assorted/action-sheet-safe-area.yaml

@@ -0,0 +1,83 @@
+appId: ${APP_ID}
+name: Action Sheet Safe Area
+onFlowStart:
+  - runFlow: '../../helpers/setup.yaml'
+onFlowComplete:
+  - evalScript: ${output.utils.deleteCreatedUsers()}
+tags:
+  - test-7
+
+# Regression for the action-sheet bottom safe-area spacing fix. The sheet
+# (TrueSheet / BottomSheetContent) owns the bottom safe-area inset; content must
+# not add its own bottom margin, which would either leave a blank band or push
+# the bottom-most row off-screen. Maestro can't measure a pixel gap, so the guard
+# is that each sheet opens and its bottom-most content stays fully visible.
+
+---
+- evalScript: ${output.user = output.utils.createUser()}
+
+- runFlow:
+    file: '../../helpers/login-with-deeplink.yaml'
+    env:
+      USERNAME: ${output.user.username}
+      PASSWORD: ${output.user.password}
+
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-view'
+    timeout: 60000
+
+# Workspaces (servers list) action sheet — the bottom "Add server" row must be visible.
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-header-servers-list-button'
+    timeout: 60000
+- tapOn:
+    id: 'rooms-list-header-servers-list-button'
+- waitForAnimationToEnd:
+    timeout: 10000
+- extendedWaitUntil:
+    visible:
+      id: 'action-sheet'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-header-servers-list'
+    timeout: 60000
+- assertVisible:
+    id: 'rooms-list-header-server-add'
+
+# Dismiss the sheet before moving on.
+- swipe:
+    direction: DOWN
+    duration: 500
+- waitForAnimationToEnd:
+    timeout: 10000
+
+# Directory filter action sheet — the bottom radio row must be visible.
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-view-directory'
+    timeout: 60000
+- tapOn:
+    id: 'rooms-list-view-directory'
+- extendedWaitUntil:
+    visible:
+      id: 'directory-view'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: 'directory-view-filter'
+    timeout: 60000
+- tapOn:
+    id: 'directory-view-filter'
+- waitForAnimationToEnd:
+    timeout: 10000
+- extendedWaitUntil:
+    visible:
+      id: 'action-sheet'
+    timeout: 60000
+- assertVisible:
+    id: 'directory-switch-channels'
+- assertVisible:
+    id: 'directory-switch-teams'

app/views/DirectoryView/Options.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react-native';
+import { ScrollView, StyleSheet } from 'react-native';
+
+import DirectoryOptions from './Options';
+
+// The directory filter is shown as action-sheet content. The sheet already applies the
+// bottom safe-area inset, so the List.Container must not add `marginBottom: insets.bottom`
+// (double-counting leaves a blank band — the bug this guards against). Inset mocked to a
+// non-zero value so a regression re-adding the margin would surface as marginBottom: 34.
+jest.mock('react-native-safe-area-context', () => ({
+	useSafeAreaInsets: () => ({ top: 0, bottom: 34, left: 0, right: 0 })
+}));
+
+describe('DirectoryView Options — action sheet bottom spacing', () => {
+	it('does not bake the bottom safe-area inset into the list container', () => {
+		render(
+			<DirectoryOptions
+				type='channels'
+				globalUsers={false}
+				isFederationEnabled={false}
+				changeType={jest.fn()}
+				toggleWorkspace={jest.fn()}
+			/>
+		);
+
+		const container = screen.UNSAFE_getByType(ScrollView);
+		const style = StyleSheet.flatten(container.props.contentContainerStyle);
+		// Neither margin nor padding: this view drops the inset entirely, so a
+		// margin->padding swap would still inflate the bottom spacing and must fail.
+		expect(style.marginBottom).toBeUndefined();
+		expect(style.paddingBottom).toBeUndefined();
+	});
+});

app/views/DirectoryView/Options.tsx

@@ -1,5 +1,4 @@
 import { Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { CustomIcon, type TIconsName } from '../../containers/CustomIcon';
 import * as List from '../../containers/List';
@@ -24,7 +23,6 @@ const DirectoryOptions = ({
 	toggleWorkspace
 }: IDirectoryOptionsProps) => {
 	const { colors } = useTheme();
-	const insets = useSafeAreaInsets();
 
 	const renderItem = (itemType: string) => {
 		let text = 'Users';
@@ -52,7 +50,7 @@ const DirectoryOptions = ({
 	};
 
 	return (
-		<List.Container contentContainerStyle={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
+		<List.Container contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}>
 			<List.Separator />
 			{renderItem('channels')}
 			<List.Separator />

app/views/MediaAutoDownloadView/ListPicker.test.tsx

@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { StyleSheet } from 'react-native';
+
+import ListPicker from './ListPicker';
+
+// Non-zero bottom inset: the action sheet (TrueSheet / BottomSheetContent) already
+// applies the bottom safe-area inset to its content, so the picker content must NOT
+// add its own `marginBottom: insets.bottom` — doing so double-counts and leaves a
+// blank band at the bottom of the sheet (the bug this guards against). With the inset
+// mocked to 34, a regression that re-adds the margin would surface as marginBottom: 34.
+jest.mock('react-native-safe-area-context', () => ({
+	useSafeAreaInsets: () => ({ top: 0, bottom: 34, left: 0, right: 0 })
+}));
+
+jest.mock('../../containers/ActionSheet', () => ({ useActionSheet: jest.fn() }));
+const mockUseActionSheet = require('../../containers/ActionSheet').useActionSheet as jest.Mock;
+
+describe('MediaAutoDownloadView ListPicker — action sheet bottom spacing', () => {
+	const showActionSheet = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseActionSheet.mockReturnValue({ showActionSheet, hideActionSheet: jest.fn() });
+	});
+
+	it('does not bake the bottom safe-area inset into the sheet content', () => {
+		render(<ListPicker value='wifi' title='Images' testID='media-picker' onChangeValue={jest.fn()} />);
+
+		fireEvent.press(screen.getByTestId('media-picker'));
+
+		expect(showActionSheet).toHaveBeenCalledTimes(1);
+		const { children } = showActionSheet.mock.calls[0][0];
+		const style = StyleSheet.flatten(children.props.style);
+		// Neither margin nor padding: this view drops the inset entirely, so a
+		// margin->padding swap would still inflate the bottom spacing and must fail.
+		expect(style.marginBottom).toBeUndefined();
+		expect(style.paddingBottom).toBeUndefined();
+	});
+});

app/views/MediaAutoDownloadView/ListPicker.tsx

@@ -1,6 +1,5 @@
 import { Fragment, type ReactElement } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useActionSheet } from '../../containers/ActionSheet';
 import * as List from '../../containers/List';
@@ -68,11 +67,10 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
-	const insets = useSafeAreaInsets();
 	const option = OPTIONS.find(option => option.value === value) || OPTIONS[2];
 
 	const getOptions = (): ReactElement => (
-		<View style={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
+		<View style={{ backgroundColor: colors.surfaceRoom }}>
 			<List.Separator />
 			{OPTIONS.map(i => (
 				<Fragment key={i.value}>

app/views/RoomsListView/components/ServersList.tsx

@@ -1,6 +1,5 @@
 import { memo, useLayoutEffect, useRef, useState } from 'react';
-import { FlatList, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { FlatList, Text, useWindowDimensions, View } from 'react-native';
 import { batch, useDispatch } from 'react-redux';
 import { type Subscription } from 'rxjs';
 
@@ -24,9 +23,7 @@ import { events, logEvent } from '../../../lib/methods/helpers/log';
 import UserPreferences from '../../../lib/methods/userPreferences';
 import { useTheme } from '../../../theme';
 import styles from '../styles';
-
-const ROW_HEIGHT = 68;
-const MAX_ROWS = 4.5;
+import { getServersListMaxHeight } from './serversListLayout';
 
 const ServersList = () => {
 	'use memo';
@@ -37,7 +34,7 @@ const ServersList = () => {
 	const server = useAppSelector(state => state.server.server);
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 	const { colors } = useTheme();
-	const insets = useSafeAreaInsets();
+	const { height: windowHeight } = useWindowDimensions();
 
 	useLayoutEffect(() => {
 		const init = () => {
@@ -124,15 +121,14 @@ const ServersList = () => {
 		<View
 			style={{
 				backgroundColor: colors.surfaceLight,
-				borderColor: colors.strokeLight,
-				marginBottom: insets.bottom
+				borderColor: colors.strokeLight
 			}}
 			testID='rooms-list-header-servers-list'>
 			<View style={[styles.serversListContainerHeader, styles.serverHeader, { borderColor: colors.strokeLight }]}>
 				<Text style={[styles.serverHeaderText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Workspaces')}</Text>
 			</View>
 			<FlatList
-				style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
+				style={{ maxHeight: getServersListMaxHeight(windowHeight) }}
 				data={servers}
 				keyExtractor={item => item.id}
 				renderItem={renderItem}

app/views/RoomsListView/components/serversListLayout.test.ts

@@ -0,0 +1,44 @@
+import { getServersListMaxHeight, SERVERS_LIST_MAX_ROWS, SERVERS_LIST_ROW_HEIGHT } from './serversListLayout';
+
+const FULL_HEIGHT = SERVERS_LIST_MAX_ROWS * SERVERS_LIST_ROW_HEIGHT;
+
+// Reserve for the Workspaces header + separator + Add Server button + sheet handle.
+// Must match SERVERS_LIST_CHROME_HEIGHT in serversListLayout.ts.
+const CHROME = 150;
+const SHEET_MAX_FRACTION = 0.75;
+
+describe('getServersListMaxHeight', () => {
+	it('keeps the full MAX_ROWS height in portrait (plenty of room)', () => {
+		// iPhone-ish portrait height
+		expect(getServersListMaxHeight(844)).toBe(FULL_HEIGHT);
+		// Tall window is still capped at the row max, not the window
+		expect(getServersListMaxHeight(2000)).toBe(FULL_HEIGHT);
+	});
+
+	it('shrinks the list in a short (landscape) window so the Add Server button still fits', () => {
+		const landscapeHeight = 390; // phone landscape
+		const maxHeight = getServersListMaxHeight(landscapeHeight);
+
+		// Constrained below the full height...
+		expect(maxHeight).toBeLessThan(FULL_HEIGHT);
+		// ...so that list + chrome fits within the sheet's max height (button not clipped).
+		expect(maxHeight + CHROME).toBeLessThanOrEqual(landscapeHeight * SHEET_MAX_FRACTION);
+	});
+
+	it('regression: 3 workspaces in landscape leave the Add Server button visible', () => {
+		const landscapeHeight = 390;
+		const threeRows = 3 * SERVERS_LIST_ROW_HEIGHT; // 204, what the old fixed 306 cap would have shown
+		const maxHeight = getServersListMaxHeight(landscapeHeight);
+
+		// The list is capped shorter than 3 full rows, so it scrolls instead of pushing
+		// the button off-screen — the bug being fixed.
+		expect(maxHeight).toBeLessThan(threeRows);
+		expect(maxHeight + CHROME).toBeLessThanOrEqual(landscapeHeight * SHEET_MAX_FRACTION);
+	});
+
+	it('never collapses below a single row', () => {
+		// Even an extremely short window keeps at least one row visible.
+		expect(getServersListMaxHeight(100)).toBe(SERVERS_LIST_ROW_HEIGHT);
+		expect(getServersListMaxHeight(0)).toBe(SERVERS_LIST_ROW_HEIGHT);
+	});
+});

app/views/RoomsListView/components/serversListLayout.ts

@@ -0,0 +1,27 @@
+// Layout math for the Workspaces (servers list) action sheet, kept dependency-free
+// so it can be unit-tested without the redux/database tree the component needs.
+
+export const SERVERS_LIST_ROW_HEIGHT = 68;
+export const SERVERS_LIST_MAX_ROWS = 4.5;
+
+// Vertical space the sheet needs for everything that is NOT the scrollable server
+// list: the "Workspaces" header, the separator, the Add Server button block, and
+// the sheet handle. Reserved so the button is never pushed off-screen.
+const SERVERS_LIST_CHROME_HEIGHT = 150;
+
+// Mirrors ACTION_SHEET_MAX_HEIGHT_FRACTION in useActionSheetDetents: a children
+// action sheet can grow to at most this fraction of the window height.
+const ACTION_SHEET_MAX_HEIGHT_FRACTION = 0.75;
+
+/**
+ * Max height for the servers FlatList. In portrait there is plenty of room, so it
+ * stays at the full MAX_ROWS cap (unchanged behaviour). In a short window
+ * (landscape, split-view) it shrinks so the header + Add Server button still fit
+ * inside the sheet's max height and the list scrolls instead of clipping the
+ * button — e.g. landscape with 3+ workspaces connected. Never smaller than one row.
+ */
+export const getServersListMaxHeight = (windowHeight: number): number => {
+	const fullHeight = SERVERS_LIST_MAX_ROWS * SERVERS_LIST_ROW_HEIGHT;
+	const availableForList = windowHeight * ACTION_SHEET_MAX_HEIGHT_FRACTION - SERVERS_LIST_CHROME_HEIGHT;
+	return Math.max(SERVERS_LIST_ROW_HEIGHT, Math.min(fullHeight, availableForList));
+};

app/views/UserNotificationPreferencesView/ListPicker.test.tsx

@@ -0,0 +1,40 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { StyleSheet } from 'react-native';
+
+import ListPicker from './ListPicker';
+
+// The sheet already applies the bottom safe-area inset to its content, so the picker
+// content must not add a `marginBottom: insets.bottom` (that double-counts and leaves
+// a blank band — the bug this guards against). This view intentionally keeps a
+// `paddingBottom` for now, so the guard is specifically on marginBottom. Inset mocked
+// to 34 so a regression re-adding the margin would surface as marginBottom: 34.
+jest.mock('react-native-safe-area-context', () => ({
+	useSafeAreaInsets: () => ({ top: 0, bottom: 34, left: 0, right: 0 })
+}));
+
+jest.mock('../../containers/ActionSheet', () => ({ useActionSheet: jest.fn() }));
+const mockUseActionSheet = require('../../containers/ActionSheet').useActionSheet as jest.Mock;
+
+describe('UserNotificationPreferencesView ListPicker — action sheet bottom spacing', () => {
+	const showActionSheet = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseActionSheet.mockReturnValue({ showActionSheet, hideActionSheet: jest.fn() });
+	});
+
+	it('does not bake the bottom safe-area inset as a margin into the sheet content', () => {
+		render(
+			<ListPicker preference='desktopNotifications' value='all' title='Alert' testID='notif-picker' onChangeValue={jest.fn()} />
+		);
+
+		fireEvent.press(screen.getByTestId('notif-picker'));
+
+		expect(showActionSheet).toHaveBeenCalledTimes(1);
+		const { children } = showActionSheet.mock.calls[0][0];
+		const style = StyleSheet.flatten(children.props.style);
+		expect(style.marginBottom).toBeUndefined();
+		// This view intentionally keeps the bottom safe-area inset as padding, so lock that contract.
+		expect(style.paddingBottom).toBe(34);
+	});
+});

app/views/UserNotificationPreferencesView/ListPicker.tsx

@@ -1,5 +1,4 @@
 import { StyleSheet, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Fragment, type ReactElement } from 'react';
 
 import * as List from '../../containers/List';
@@ -37,10 +36,9 @@ const ListPicker = ({
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
 	const option = value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0];
-	const insets = useSafeAreaInsets();
 
 	const getOptions = (): ReactElement => (
-		<View style={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
+		<View style={{ backgroundColor: colors.surfaceRoom }}>
 			<List.Separator />
 			{OPTIONS[preference].map(i => (
 				<Fragment key={i.value}>