src/app/features/settings/Settings.tsx

@@ -33,6 +33,7 @@ import { About } from './about';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { stopPropagation } from '../../utils/keyboard';
 import { LogoutDialog } from '../../components/LogoutDialog';
+import { PhoneHit } from '../../styles/PhoneHit.css';
 
 export enum SettingsPages {
   GeneralPage,
@@ -141,7 +142,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
               </Box>
               <Box shrink="No">
                 {screenSize === ScreenSize.Mobile && (
-                  <IconButton onClick={requestClose} variant="Background">
+                  <IconButton className={PhoneHit} onClick={requestClose} variant="Background">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 )}

src/app/features/settings/about/About.tsx

@@ -8,6 +8,7 @@ import { LogoMark } from '../../../components/logo/logoMark.css';
 import RatatoskrSVG from '../../../../../public/res/svg/ratatoskr.svg';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type AboutProps = {
   requestClose: () => void;
@@ -25,7 +26,7 @@ export function About({ requestClose }: AboutProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/account/Account.tsx

@@ -5,6 +5,7 @@ import { MatrixId } from './MatrixId';
 import { Profile } from './Profile';
 import { ContactInformation } from './ContactInfo';
 import { IgnoredUserList } from './IgnoredUserList';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type AccountProps = {
   requestClose: () => void;
@@ -20,7 +21,7 @@ export function Account({ requestClose }: AccountProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/developer-tools/DevelopTools.tsx

@@ -13,6 +13,7 @@ import {
 } from '../../../components/AccountDataEditor';
 import { copyToClipboard } from '../../../utils/dom';
 import { AccountData } from './AccountData';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
@@ -51,7 +52,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/devices/Devices.tsx

@@ -26,6 +26,7 @@ import {
 } from '../../../hooks/useSecretStorage';
 import { useCrossSigningActive } from '../../../hooks/useCrossSigning';
 import { BackupRestoreTile } from '../../../components/BackupRestore';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 function DevicesPlaceholder() {
   return (
@@ -74,7 +75,7 @@ export function Devices({ requestClose }: DevicesProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/emojis-stickers/EmojisStickers.tsx

@@ -5,6 +5,7 @@ import { GlobalPacks } from './GlobalPacks';
 import { UserPack } from './UserPack';
 import { ImagePack } from '../../../plugins/custom-emoji';
 import { ImagePackView } from '../../../components/image-pack-view';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type EmojisStickersProps = {
   requestClose: () => void;
@@ -30,7 +31,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -43,6 +43,7 @@ import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { AccountDataEvent } from '../../../../types/matrix/accountData';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../../utils/keyboard';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 function GlobalPackSelector({
   packs,
@@ -368,6 +369,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
             <Box alignItems="Center" gap="300">
               {removed ? (
                 <IconButton
+                  className={PhoneHit}
                   size="300"
                   radii="Pill"
                   variant="Critical"
@@ -378,6 +380,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
                 </IconButton>
               ) : (
                 <IconButton
+                  className={PhoneHit}
                   size="300"
                   radii="Pill"
                   variant="Secondary"

src/app/features/settings/general/General.tsx

@@ -50,6 +50,7 @@ import { useMessageLayoutItems } from '../../../hooks/useMessageLayout';
 import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
 import { useDateFormatItems } from '../../../hooks/useDateFormat';
 import { SequenceCardStyle } from '../styles.css';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type ThemeSelectorProps = {
   themeNames: Record<string, string>;
@@ -497,6 +498,7 @@ function DateHint({ hasChanges, handleReset }: DateHintProps) {
     >
       {hasChanges ? (
         <IconButton
+          className={PhoneHit}
           tabIndex={-1}
           onClick={handleReset}
           type="reset"
@@ -508,6 +510,7 @@ function DateHint({ hasChanges, handleReset }: DateHintProps) {
         </IconButton>
       ) : (
         <IconButton
+          className={PhoneHit}
           tabIndex={-1}
           onClick={handleOpenMenu}
           type="button"
@@ -1015,7 +1018,7 @@ export function General({ requestClose }: GeneralProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/settings/notifications/KeywordMessages.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../../hooks/useNotificationMode';
 import { NotificationModeSwitcher } from './NotificationModeSwitcher';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const NOTIFY_MODE_OPS: NotificationModeOptions = {
   highlight: true,
@@ -75,6 +76,7 @@ function KeywordInput() {
             keyword &&
             !addingKeyword && (
               <IconButton
+                className={PhoneHit}
                 type="reset"
                 onClick={handleReset}
                 size="300"
@@ -118,7 +120,14 @@ function KeywordCross({ pushRule }: PushRulesProps) {
 
   const removing = removeState.status === AsyncStatus.Loading;
   return (
-    <IconButton onClick={remove} size="300" radii="Pill" variant="Secondary" disabled={removing}>
+    <IconButton
+      className={PhoneHit}
+      onClick={remove}
+      size="300"
+      radii="Pill"
+      variant="Secondary"
+      disabled={removing}
+    >
       {removing ? <Spinner size="100" /> : <Icon src={Icons.Cross} size="100" />}
     </IconButton>
   );

src/app/features/settings/notifications/Notifications.tsx

@@ -8,6 +8,7 @@ import { KeywordMessagesNotifications } from './KeywordMessages';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type NotificationsProps = {
   requestClose: () => void;
@@ -23,7 +24,7 @@ export function Notifications({ requestClose }: NotificationsProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/phoneHit.settingsA.test.ts

@@ -0,0 +1,29 @@
+import { describe, it } from 'vitest';
+import { expectPhoneHitClasses, expectSizeTie } from './phoneHitTestKit';
+
+describe('icon buttons in settings A', () => {
+  // The class each IconButton must carry, in source order. Every one is alone in its row (a header close next to
+  // non-tappable title text, an input slot, or a list tile beside a non-tappable Avatar), so the plain PhoneHit.
+  const expected: Record<string, string[]> = {
+    'features/settings/developer-tools/DevelopTools.tsx': ['PhoneHit'], // header close, 40 px
+    'features/settings/notifications/Notifications.tsx': ['PhoneHit'], // header close, 40 px
+    'features/settings/notifications/KeywordMessages.tsx': ['PhoneHit', 'PhoneHit'], // input reset, remove: 26 px, alone
+    'features/settings/emojis-stickers/EmojisStickers.tsx': ['PhoneHit'], // header close, 40 px
+    'features/settings/emojis-stickers/GlobalPacks.tsx': ['PhoneHit', 'PhoneHit'], // undo / remove, a ternary pair, 26 px
+    'features/settings/Settings.tsx': ['PhoneHit'], // mobile-only header close, 40 px
+    'features/settings/about/About.tsx': ['PhoneHit'], // header close, 40 px
+    'features/settings/general/General.tsx': ['PhoneHit', 'PhoneHit', 'PhoneHit'], // reset / info (ternary), header close
+    'features/settings/account/Account.tsx': ['PhoneHit'], // header close, 40 px
+    'features/settings/devices/Devices.tsx': ['PhoneHit'], // header close, 40 px
+  };
+
+  it.each(Object.entries(expected))('%s carries the right hit-area class', (file, want) => {
+    expectPhoneHitClasses(file, want);
+  });
+
+  // Plain PhoneHit has no size to tie, so nothing is allow-listed; the check still fails an allow-list entry
+  // or a sized variant that disagrees with the drawn size if one is added later.
+  it.each(Object.keys(expected))('%s ties a sized variant to the drawn size', (file) => {
+    expectSizeTie(file);
+  });
+});