From c8434b061011f10a155203e104748977a5e09e8b Mon Sep 17 00:00:00 2001 From: Linus Rath <139418639+rathlinus@users.noreply.github.com> Date: Thu, 15 Oct 2026 03:30:00 +0200 Subject: [PATCH] fix: make small buttons easier to hit --- src/components/SidebarDrawer.tsx | 6 ++++-- src/components/ToggleSwitch.tsx | 2 ++ src/components/email/QuickReplyBox.tsx | 5 ++++- src/components/settings/AccountSettings.tsx | 4 ++-- src/screens/ComposeScreen.tsx | 3 ++- src/screens/EmailListScreen.tsx | 4 ++-- src/screens/EmailThreadScreen.tsx | 4 ++-- src/screens/FilesScreen.tsx | 12 +++++++++--- src/screens/login/LoginShell.tsx | 2 +- 9 files changed, 28 insertions(+), 14 deletions(-) diff --git a/src/components/SidebarDrawer.tsx b/src/components/SidebarDrawer.tsx index d7245904..0dc475c4 100644 --- a/src/components/SidebarDrawer.tsx +++ b/src/components/SidebarDrawer.tsx @@ -186,7 +186,9 @@ function SidebarRow({ {hasChildren ? ( !disabled && onValueChange(!value)} + // The track is 44 x 24; the touch area reaches 48 dp high. + hitSlop={{ top: 12, bottom: 12, left: 4, right: 4 }} accessibilityRole="switch" accessibilityLabel={accessibilityLabel} accessibilityState={{ checked: value, disabled }} diff --git a/src/components/email/QuickReplyBox.tsx b/src/components/email/QuickReplyBox.tsx index 87b3db3c..fd147cb7 100644 --- a/src/components/email/QuickReplyBox.tsx +++ b/src/components/email/QuickReplyBox.tsx @@ -161,7 +161,7 @@ export function QuickReplyBox({ email, jmapAccountId, onMoreOptions, onSent, onF editable={!sending} /> - onMoreOptions(text)} hitSlop={6}> + onMoreOptions(text)} hitSlop={10} accessibilityRole="button"> {t('email_viewer.more_options', 'More options')} @@ -169,6 +169,9 @@ export function QuickReplyBox({ email, jmapAccountId, onMoreOptions, onSent, onF style={[styles.send, (!text.trim() || sending) && styles.sendDisabled]} onPress={send} disabled={!text.trim() || sending} + hitSlop={10} + accessibilityRole="button" + accessibilityState={{ disabled: !text.trim() || sending, busy: sending }} > {sending ? : } {sending ? t('email_viewer.sending', 'Sending...') : t('email_viewer.send', 'Send')} diff --git a/src/components/settings/AccountSettings.tsx b/src/components/settings/AccountSettings.tsx index 9c3250d3..398e12e4 100644 --- a/src/components/settings/AccountSettings.tsx +++ b/src/components/settings/AccountSettings.tsx @@ -5,7 +5,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { ArrowDown, ArrowUp, Check, ChevronRight, Plus, Star, Trash2, Users } from 'lucide-react-native'; import { SettingsSection, SettingItem } from './settings-section'; import Button from '../Button'; -import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens'; +import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens'; import { useColors } from '../../theme/colors'; import { useAuthStore } from '../../stores/auth-store'; import { useAccountStore } from '../../stores/account-store'; @@ -341,7 +341,7 @@ function makeStyles(c: ThemePalette) { rowError: { ...typography.caption, color: c.error }, defaultBadge: { ...typography.caption, color: c.primary, marginTop: 2 }, rowActions: { flexDirection: 'row', gap: 2 }, - iconBtn: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center', borderRadius: radius.sm }, + iconBtn: { width: componentSizes.buttonLg, height: componentSizes.buttonLg, alignItems: 'center', justifyContent: 'center', borderRadius: radius.sm }, addRow: { gap: spacing.sm, alignItems: 'flex-start' }, hint: { ...typography.caption, color: c.mutedForeground }, }); diff --git a/src/screens/ComposeScreen.tsx b/src/screens/ComposeScreen.tsx index 7dc71bee..c59fe4ea 100644 --- a/src/screens/ComposeScreen.tsx +++ b/src/screens/ComposeScreen.tsx @@ -213,7 +213,8 @@ function RecipientChip({ diff --git a/src/screens/EmailListScreen.tsx b/src/screens/EmailListScreen.tsx index 1fa95773..99efe199 100644 --- a/src/screens/EmailListScreen.tsx +++ b/src/screens/EmailListScreen.tsx @@ -2025,8 +2025,8 @@ function makeStyles(c: ThemePalette) { lineHeight: 14, }, searchClearButton: { - width: 20, - height: 20, + width: 32, + height: 32, alignItems: 'center', justifyContent: 'center', borderRadius: radius.full, diff --git a/src/screens/EmailThreadScreen.tsx b/src/screens/EmailThreadScreen.tsx index b4a54b6b..e4438779 100644 --- a/src/screens/EmailThreadScreen.tsx +++ b/src/screens/EmailThreadScreen.tsx @@ -1627,8 +1627,8 @@ function makeStyles(c: ThemePalette) { borderBottomColor: c.border, }, toolbarBack: { - width: componentSizes.avatarSm, - height: componentSizes.avatarSm, + width: componentSizes.buttonLg, + height: componentSizes.buttonLg, alignItems: 'center', justifyContent: 'center', borderRadius: radius.full, diff --git a/src/screens/FilesScreen.tsx b/src/screens/FilesScreen.tsx index 4183cfa7..d5fdcdbb 100644 --- a/src/screens/FilesScreen.tsx +++ b/src/screens/FilesScreen.tsx @@ -60,7 +60,7 @@ import { useLayout, useSheetInsets } from '../lib/use-layout'; import { useBackWhileFocused } from '../lib/use-back-while-focused'; import { filesBackStep } from '../lib/files-back'; import type { FileNode } from '../api/types'; -import { spacing, radius, typography, type ThemePalette } from '../theme/tokens'; +import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens'; import { useColors } from '../theme/colors'; import { useSettingsStore, type FilesViewMode, type FilesSortKey, type FilesSortDir, @@ -1492,7 +1492,10 @@ function makeStyles(c: ThemePalette) { gap: spacing.xs, }, headerBtn: { - padding: spacing.xs, + minWidth: componentSizes.buttonLg, + minHeight: componentSizes.buttonLg, + alignItems: 'center', + justifyContent: 'center', borderRadius: radius.sm, }, headerBtnActive: { @@ -1627,7 +1630,10 @@ function makeStyles(c: ThemePalette) { color: c.textMuted, }, rowMore: { - padding: spacing.xs, + width: componentSizes.buttonLg, + height: componentSizes.buttonLg, + alignItems: 'center', + justifyContent: 'center', }, gridContent: { padding: spacing.sm, diff --git a/src/screens/login/LoginShell.tsx b/src/screens/login/LoginShell.tsx index 46beeb61..cd15bff6 100644 --- a/src/screens/login/LoginShell.tsx +++ b/src/screens/login/LoginShell.tsx @@ -109,7 +109,7 @@ function makeStyles(c: ThemePalette) { paddingHorizontal: spacing.lg, height: componentSizes.headerHeight, }, - headerButton: { width: 32, height: 32, alignItems: 'center', justifyContent: 'center' }, + headerButton: { width: componentSizes.buttonLg, height: componentSizes.buttonLg, alignItems: 'center', justifyContent: 'center' }, // One readable column, centred on a tablet or a phone in landscape. content: { width: '100%',