fix: keep sheet and dialog fields and buttons above the keyboard

src/components/Dialog.tsx

@@ -6,6 +6,7 @@ import { spacing, radius, typography, type ThemePalette } from '../theme/tokens'
 import { useColors } from '../theme/colors';
 import { useLocaleStore } from '../stores/locale-store';
 import { MODAL_ORIENTATIONS } from '../lib/modal-orientations';
+import { useSheetBottomInset } from '../lib/sheet-bottom-inset';
 
 interface DialogInput {
   value: string;
@@ -53,11 +54,14 @@ export default function Dialog({
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
+  // The card centres in the space above the keyboard (a prompt's field and
+  // its confirm button stay visible) and above the navigation bar.
+  const bottomInset = useSheetBottomInset(visible);
   const confirmLabel = confirmText ?? t('common.confirm', 'Confirm');
   const cancelLabel = cancelText ?? t('common.cancel', 'Cancel');
   return (
     <Modal supportedOrientations={MODAL_ORIENTATIONS} visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
-      <View style={styles.backdrop}>
+      <View style={[styles.backdrop, { paddingBottom: spacing.lg + bottomInset }]}>
         <View style={styles.dialog}>
           <View style={styles.content}>
             {variant === 'destructive' && (

src/components/TagSheet.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { X, Check, Tag } from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
@@ -13,6 +12,7 @@ import { getEmailTagIds } from '../lib/thread-utils';
 import type { Email } from '../api/types';
 import { MODAL_ORIENTATIONS } from '../lib/modal-orientations';
 import { useSheetInsets } from '../lib/use-layout';
+import { useSheetBottomInset } from '../lib/sheet-bottom-inset';
 import { NewTagRow } from './NewTagRow';
 
 interface TagSheetProps {
@@ -29,7 +29,8 @@ export function TagSheet({ visible, onClose, keywords, selectedEmails, onToggle
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
-  const insets = useSafeAreaInsets();
+  // Above the taskbar, and above the keyboard while "New tag" is typed in.
+  const bottomInset = useSheetBottomInset(visible);
   const slideY = React.useRef(new Animated.Value(500)).current;
   // Centred on a wide window, clear of side insets in landscape.
   const sheetInsets = useSheetInsets();
@@ -77,7 +78,7 @@ export function TagSheet({ visible, onClose, keywords, selectedEmails, onToggle
       <Animated.View
         style={[
           styles.sheet,
-          { paddingBottom: Math.max(insets.bottom, spacing.md), transform: [{ translateY: slideY }], ...sheetInsets },
+          { paddingBottom: Math.max(bottomInset, spacing.md), transform: [{ translateY: slideY }], ...sheetInsets },
         ]}
       >
         <View {...dragHandlers}>

src/components/TemplateSheet.tsx

@@ -12,6 +12,7 @@ import { useTemplatesStore, type EmailTemplate } from '../stores/templates-store
 import { filterTemplates } from '../lib/template-utils';
 import { MODAL_ORIENTATIONS } from '../lib/modal-orientations';
 import { useSheetInsets } from '../lib/use-layout';
+import { useSheetBottomInset } from '../lib/sheet-bottom-inset';
 import { TemplateSettings } from './settings/TemplateSettings';
 
 interface TemplateSheetProps {
@@ -41,6 +42,8 @@ export function TemplateSheet({ visible, onClose, onPick }: TemplateSheetProps)
   const [query, setQuery] = React.useState('');
   // The template manager, shown in place of the picker.
   const [managing, setManaging] = React.useState(false);
+  // Above the keyboard while the search field is typed in.
+  const bottomInset = useSheetBottomInset(visible && !managing);
   const slideY = React.useRef(new Animated.Value(500)).current;
   // Centred on a wide window, clear of side insets in landscape.
   const sheetInsets = useSheetInsets();
@@ -130,7 +133,7 @@ export function TemplateSheet({ visible, onClose, onPick }: TemplateSheetProps)
       <Animated.View
         style={[
           styles.sheet,
-          { paddingBottom: Math.max(insets.bottom, spacing.md), transform: [{ translateY: slideY }], ...sheetInsets },
+          { paddingBottom: Math.max(bottomInset, spacing.md), transform: [{ translateY: slideY }], ...sheetInsets },
         ]}
       >
         <View {...dragHandlers}>

src/components/filters/FilterRuleModal.tsx

@@ -45,6 +45,7 @@ import { SafeAreaModal } from '../SafeAreaModal';
 import { useFilterStore } from '../../stores/filter-store';
 import { forwardsOfEditedRule, ruleForwardLimit } from '../../lib/sieve/forward-limit';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
+import { useModalKeyboardPadding } from '../../lib/sheet-bottom-inset';
 
 const ALL_FIELDS: FilterConditionField[] = ['from', 'to', 'cc', 'subject', 'header', 'size', 'body', 'attachment', 'all'];
 
@@ -91,6 +92,8 @@ export function FilterRuleModal({
   const c = useColors();
   const styles = useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
+  // The Android dialog doesn't shrink for the keyboard; the body ends above it.
+  const keyboardPadding = useModalKeyboardPadding(visible);
   const keywords = useKeywordsStore((s) => s.keywords);
   const isEdit = !!editedRule;
   const rule = editedRule ?? initialRule;
@@ -315,7 +318,7 @@ export function FilterRuleModal({
         </View>
 
         <KeyboardAvoidingView
-          style={{ flex: 1 }}
+          style={{ flex: 1, paddingBottom: keyboardPadding }}
           behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         >
           <ScrollView contentContainerStyle={styles.body} keyboardShouldPersistTaps="handled">

src/components/filters/SieveEditorSheet.tsx

@@ -11,6 +11,7 @@ import Button from '../Button';
 import { useLocaleStore } from '../../stores/locale-store';
 import { SafeAreaModal } from '../SafeAreaModal';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
+import { useModalKeyboardPadding } from '../../lib/sheet-bottom-inset';
 import { seedsOnRender } from '../../lib/sieve/editor-seed';
 
 interface SieveEditorSheetProps {
@@ -25,6 +26,8 @@ export function SieveEditorSheet({ visible, content, onSave, onClose, onValidate
   const c = useColors();
   const styles = useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
+  // The Android dialog doesn't shrink for the keyboard; the body ends above it.
+  const keyboardPadding = useModalKeyboardPadding(visible);
 
   const [script, setScript] = useState(content);
   const [isValidating, setIsValidating] = useState(false);
@@ -85,7 +88,7 @@ export function SieveEditorSheet({ visible, content, onSave, onClose, onValidate
         </View>
 
         <KeyboardAvoidingView
-          style={{ flex: 1 }}
+          style={{ flex: 1, paddingBottom: keyboardPadding }}
           behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         >
           <View style={styles.body}>

src/components/settings/ContentSendersSettings.tsx

@@ -14,6 +14,7 @@ import { isTrustedSendersSyncOn } from '../../lib/trusted-senders';
 import { removeTrustedSenderWithUndo } from '../../lib/settings-undo';
 import { useLocaleStore } from '../../stores/locale-store';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
+import { useSheetBottomInset } from '../../lib/sheet-bottom-inset';
 import { ToastHost } from '../ToastHost';
 
 interface TrustedRow {
@@ -48,6 +49,8 @@ export function ContentSendersSettings() {
   const removeFromTrustedSendersBook = useContactsStore((s) => s.removeFromTrustedSendersBook);
 
   const [modalOpen, setModalOpen] = useState(false);
+  // The card centres above the keyboard while an address is typed in.
+  const bottomInset = useSheetBottomInset(modalOpen);
   const [newSender, setNewSender] = useState('');
   const [busy, setBusy] = useState<string | null>(null);
 
@@ -197,7 +200,7 @@ export function ContentSendersSettings() {
         animationType="fade"
         onRequestClose={() => setModalOpen(false)}
       >
-        <Pressable accessible={false} style={styles.modalBackdrop} onPress={() => setModalOpen(false)}>
+        <Pressable accessible={false} style={[styles.modalBackdrop, { paddingBottom: bottomInset }]} onPress={() => setModalOpen(false)}>
           <Pressable accessible={false} style={styles.modalCard} onPress={() => {}}>
             <View style={styles.modalHeader}>
               <Text style={styles.modalTitle}>{t('settings.email_behavior.trusted_senders.modal_title', 'Trusted Senders')}</Text>

src/components/settings/DelegateDialog.tsx

@@ -19,6 +19,7 @@ import { spacing, radius, typography, type ThemePalette } from '../../theme/toke
 import { useColors } from '../../theme/colors';
 import { useLocaleStore } from '../../stores/locale-store';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
+import { useModalKeyboardPadding } from '../../lib/sheet-bottom-inset';
 import { findPrincipalByEmail } from '../../api/delegation';
 import type { Principal } from '../../api/types';
 import type { PrincipalListing } from '../../api/files';
@@ -74,6 +75,8 @@ export function DelegateDialog({
   const c = useColors();
   const styles = useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
+  // The Android dialog doesn't shrink for the keyboard; the body ends above it.
+  const keyboardPadding = useModalKeyboardPadding();
   const changing = !!initial;
 
   const [principal, setPrincipal] = useState<Principal | null>(initial?.principal ?? null);
@@ -154,7 +157,7 @@ export function DelegateDialog({
   return (
     <SafeAreaModal supportedOrientations={MODAL_ORIENTATIONS} visible animationType="slide" onRequestClose={close}>
       <SafeAreaView style={styles.screen} edges={['top', 'bottom', 'left', 'right']}>
-        <KeyboardAvoidingView style={styles.screen} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <KeyboardAvoidingView style={[styles.screen, { paddingBottom: keyboardPadding }]} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
           <View style={styles.header}>
             <Text style={styles.title} numberOfLines={1} accessibilityRole="header">
               {changing && principal

src/components/settings/FolderSettings.tsx

@@ -69,7 +69,6 @@ function pathOf(all: Mailbox[], mb: Mailbox, t: (k: string, f?: string) => strin
 export function FolderSettings() {
   // Centred on a wide window, clear of side insets in landscape.
   const sheetInsets = useSheetInsets();
-  const bottomInset = useSheetBottomInset();
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
@@ -78,6 +77,9 @@ export function FolderSettings() {
   const fetchMailboxes = useEmailStore((s) => s.fetchMailboxes);
 
   const [editor, setEditor] = useState<Editor | null>(null);
+  // Save and Cancel above the taskbar, and above the keyboard while the
+  // name is typed in.
+  const bottomInset = useSheetBottomInset(!!editor);
   const [draftName, setDraftName] = useState('');
   const [draftParent, setDraftParent] = useState<string>(NO_PARENT);
   const [draftAccount, setDraftAccount] = useState<string>(OWN_ACCOUNT);

src/components/settings/IdentitySettings.tsx

@@ -99,7 +99,6 @@ function parseAddressList(value: string): { list: EmailAddress[]; invalid: strin
 export function IdentitySettings() {
   // Centred on a wide window, clear of side insets in landscape.
   const sheetInsets = useSheetInsets();
-  const bottomInset = useSheetBottomInset();
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const identities = useSettingsStore((s) => s.identities);
@@ -113,6 +112,8 @@ export function IdentitySettings() {
   const preferredId = accountId ? preferredIdentityIds[accountId] : undefined;
 
   const [editing, setEditing] = useState<DraftIdentity | null>(null);
+  // Save above the taskbar, and above the keyboard while a field is typed in.
+  const bottomInset = useSheetBottomInset(!!editing);
   const [saving, setSaving] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
 

src/components/settings/TemplateSettings.tsx

@@ -24,7 +24,6 @@ import { useSheetBottomInset } from '../../lib/sheet-bottom-inset';
 export function TemplateSettings() {
   // Centred on a wide window, clear of side insets in landscape.
   const sheetInsets = useSheetInsets();
-  const bottomInset = useSheetBottomInset();
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const tr = useLocaleStore((s) => s.t);
@@ -41,6 +40,8 @@ export function TemplateSettings() {
 
   const [editing, setEditing] = useState<EmailTemplate | null>(null);
   const [importVisible, setImportVisible] = useState(false);
+  // Save above the taskbar, and above the keyboard while a field is typed in.
+  const bottomInset = useSheetBottomInset(!!editing || importVisible);
   const [importText, setImportText] = useState('');
   const [draftName, setDraftName] = useState('');
   const [draftSubject, setDraftSubject] = useState('');