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

@@ -30,6 +30,7 @@ import {
   AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
@@ -92,7 +93,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/common-settings/developer-tools/SendRoomEvent.tsx

@@ -22,6 +22,7 @@ import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { Cursor } from '../../../plugins/text-area';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -118,7 +119,7 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
             </Chip>
           </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/common-settings/developer-tools/StateEventEditor.tsx

@@ -31,6 +31,7 @@ import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -275,7 +276,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
             </Chip>
           </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/common-settings/emojis-stickers/EmojisStickers.tsx

@@ -4,6 +4,7 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { ImagePack } from '../../../plugins/custom-emoji';
 import { ImagePackView } from '../../../components/image-pack-view';
 import { RoomPacks } from './RoomPacks';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type EmojisStickersProps = {
   requestClose: () => void;
@@ -29,7 +30,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/common-settings/emojis-stickers/RoomPacks.tsx

@@ -40,6 +40,7 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type CreatePackTileProps = {
   packs: ImagePack[];
@@ -215,6 +216,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
               {canEdit &&
                 (removed ? (
                   <IconButton
+                    className={PhoneHit}
                     size="300"
                     radii="Pill"
                     variant="Critical"
@@ -225,6 +227,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
                   </IconButton>
                 ) : (
                   <IconButton
+                    className={PhoneHit}
                     size="300"
                     radii="Pill"
                     variant="Secondary"

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -28,6 +28,7 @@ import { useRoom } from '../../../hooks/useRoom';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
 
@@ -123,7 +124,12 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
                     <Box grow="Yes">
                       <Text size="H4">Enable Encryption</Text>
                     </Box>
-                    <IconButton size="300" onClick={() => setPrompt(false)} radii="300">
+                    <IconButton
+                      className={PhoneHit}
+                      size="300"
+                      onClick={() => setPrompt(false)}
+                      radii="300"
+                    >
                       <Icon src={Icons.Cross} />
                     </IconButton>
                   </Header>

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -39,6 +39,7 @@ import { useAlive } from '../../../hooks/useAlive';
 import { creatorsSupported } from '../../../utils/matrix';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { BreakWord } from '../../../styles/Text.css';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
   const mx = useMatrixClient();
@@ -105,7 +106,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
               <Box grow="Yes">
                 <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
               </Box>
-              <IconButton size="300" onClick={requestClose} radii="300">
+              <IconButton className={PhoneHit} size="300" onClick={requestClose} radii="300">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/common-settings/members/Members.tsx

@@ -56,6 +56,7 @@ import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { getMouseEventCords } from '../../../utils/dom';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -161,7 +162,7 @@ export function Members({ requestClose }: MembersProps) {
             </Text>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton className={PhoneHit} onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>
@@ -277,6 +278,7 @@ export function Members({ requestClose }: MembersProps) {
                 anchorRef={scrollTopAnchorRef}
               >
                 <IconButton
+                  className={PhoneHit}
                   onClick={() => virtualizer.scrollToOffset(0)}
                   variant="Surface"
                   radii="Pill"

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -49,6 +49,7 @@ import { useAlive } from '../../../hooks/useAlive';
 import { BetaNoticeBadge } from '../../../components/BetaNoticeBadge';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { creatorsSupported } from '../../../utils/matrix';
+import { PhoneHit } from '../../../styles/PhoneHit.css';
 
 type EditPowerProps = {
   maxPower: number;
@@ -369,7 +370,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
             </Chip>
           </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.commonSettings.test.ts

@@ -0,0 +1,26 @@
+import { describe, it } from 'vitest';
+import { expectPhoneHitClasses, expectSizeTie } from './phoneHitTestKit';
+
+// Every IconButton under features/common-settings, in source order. Header close buttons are alone at the
+// header end (the title beside them is text), the dialog close buttons are alone in their Header, the
+// scroll-to-top button floats alone, and the RoomPacks pair is a ternary (only one renders): all PhoneHit.
+const files: [string, string[]][] = [
+  ['features/common-settings/members/Members.tsx', ['PhoneHit', 'PhoneHit']],
+  ['features/common-settings/developer-tools/SendRoomEvent.tsx', ['PhoneHit']],
+  ['features/common-settings/developer-tools/StateEventEditor.tsx', ['PhoneHit']],
+  ['features/common-settings/developer-tools/DevelopTools.tsx', ['PhoneHit']],
+  ['features/common-settings/permissions/PowersEditor.tsx', ['PhoneHit']],
+  ['features/common-settings/emojis-stickers/EmojisStickers.tsx', ['PhoneHit']],
+  ['features/common-settings/emojis-stickers/RoomPacks.tsx', ['PhoneHit', 'PhoneHit']],
+  ['features/common-settings/general/RoomEncryption.tsx', ['PhoneHit']],
+  ['features/common-settings/general/RoomUpgrade.tsx', ['PhoneHit']],
+];
+
+describe.each(files)('phone hit area: %s', (file, want) => {
+  it('carries the variant its drawn size and neighbours call for', () => {
+    expectPhoneHitClasses(file, want);
+  });
+  it('names a size that matches what it draws', () => {
+    expectSizeTie(file);
+  });
+});