src/app/components/AccountDataEditor.tsx

@@ -16,6 +16,7 @@ import {
 } from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { Cursor } from '../plugins/text-area';
+import { PhoneHit } from '../styles/PhoneHit.css';
 import { syntaxErrorPosition } from '../utils/dom';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { Page, PageHeader } from './page';
@@ -294,7 +295,7 @@ export function AccountDataEditor({
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" className={PhoneHit}>
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/components/image-pack-view/ImagePackView.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
 import { PackAddress } from '../../plugins/custom-emoji';
+import { PhoneHit } from '../../styles/PhoneHit.css';
 import { Page, PageHeader, PageContent } from '../page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomImagePack } from './RoomImagePack';
@@ -29,7 +30,7 @@ export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" className={PhoneHit}>
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/components/message/FileHeader.tsx

@@ -2,6 +2,7 @@ import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'f
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FileSaver from 'file-saver';
+import { PhoneHit } from '../../styles/PhoneHit.css';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -48,6 +49,7 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
       variant={hasError ? 'Critical' : 'SurfaceVariant'}
       size="300"
       radii="300"
+      className={PhoneHit}
     >
       {downloading ? (
         <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />

src/app/components/message/content/AudioContent.tsx

@@ -3,6 +3,7 @@ import React, { ReactNode, useCallback, useRef, useState } from 'react';
 import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
+import { PhoneHitSpread24 } from '../../../styles/PhoneHit.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { IAudioInfo } from '../../../../types/matrix/common';
@@ -159,6 +160,7 @@ export function AudioContent({
           variant="SurfaceVariant"
           size="300"
           radii="Pill"
+          className={PhoneHitSpread24}
           onClick={() => setMute(!mute)}
           aria-pressed={mute}
         >

src/app/phoneHit.content.test.ts

@@ -0,0 +1,26 @@
+import { describe, it } from 'vitest';
+import { expectPhoneHitClasses, expectSizeTie } from './phoneHitTestKit';
+
+describe('icon buttons in message content and data editors', () => {
+  // The class each IconButton must carry, in source order.
+  const expected: Record<string, string[]> = {
+    // mute toggle, 16 px icon + 8 padding = 24 px, 8 px from the volume slider (tappable)
+    'components/message/content/AudioContent.tsx': ['PhoneHitSpread24'],
+    // download, alone at the end of the header row (26 px)
+    'components/message/FileHeader.tsx': ['PhoneHit'],
+    // code block expand/collapse, 24 px, 8 px from the Copy chip
+    'plugins/react-custom-html-parser.tsx': ['PhoneHitSpread24'],
+    // close at the header end, alone
+    'components/AccountDataEditor.tsx': ['PhoneHit'],
+    'components/image-pack-view/ImagePackView.tsx': ['PhoneHit'],
+  };
+
+  it.each(Object.entries(expected))(
+    '%s: each IconButton carries its own PhoneHit class',
+    (file, want) => expectPhoneHitClasses(file, want)
+  );
+
+  it.each(Object.keys(expected))('%s: a sized variant matches the drawn size', (file) =>
+    expectSizeTie(file)
+  );
+});

src/app/plugins/react-custom-html-parser.tsx

@@ -22,6 +22,7 @@ import Linkify from 'linkify-react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ChildNode } from 'domhandler';
 import * as css from '../styles/CustomHtml.css';
+import { PhoneHitSpread24 } from '../styles/PhoneHit.css';
 import {
   getMxIdLocalPart,
   getCanonicalAliasRoomId,
@@ -282,6 +283,7 @@ export function CodeBlock({
               variant="SurfaceVariant"
               outlined
               radii="300"
+              className={PhoneHitSpread24}
               onClick={toggleExpand}
               aria-label={expanded ? 'Collapse' : 'Expand'}
             >