diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index 5e1a20f4..6c91bc9d 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/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) {
{screenSize === ScreenSize.Mobile && (
-
+
)}
diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx
index 9ec74305..19407bdf 100644
--- a/src/app/features/settings/about/About.tsx
+++ b/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) {
-
+
diff --git a/src/app/features/settings/account/Account.tsx b/src/app/features/settings/account/Account.tsx
index c4b56e47..77ee8671 100644
--- a/src/app/features/settings/account/Account.tsx
+++ b/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) {
-
+
diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx
index a3f04567..7203fdc5 100644
--- a/src/app/features/settings/developer-tools/DevelopTools.tsx
+++ b/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) {
-
+
diff --git a/src/app/features/settings/devices/Devices.tsx b/src/app/features/settings/devices/Devices.tsx
index c957ab31..9e5821ba 100644
--- a/src/app/features/settings/devices/Devices.tsx
+++ b/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) {
-
+
diff --git a/src/app/features/settings/emojis-stickers/EmojisStickers.tsx b/src/app/features/settings/emojis-stickers/EmojisStickers.tsx
index 93715120..2c2193a9 100644
--- a/src/app/features/settings/emojis-stickers/EmojisStickers.tsx
+++ b/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) {
-
+
diff --git a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
index a9288728..38647b13 100644
--- a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
+++ b/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) {
{removed ? (
) : (
;
@@ -497,6 +498,7 @@ function DateHint({ hasChanges, handleReset }: DateHintProps) {
>
{hasChanges ? (
) : (
-
+
diff --git a/src/app/features/settings/notifications/KeywordMessages.tsx b/src/app/features/settings/notifications/KeywordMessages.tsx
index 7f84d607..b77cae21 100644
--- a/src/app/features/settings/notifications/KeywordMessages.tsx
+++ b/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 && (
+
{removing ? : }
);
diff --git a/src/app/features/settings/notifications/Notifications.tsx b/src/app/features/settings/notifications/Notifications.tsx
index 095a9bba..61af1a09 100644
--- a/src/app/features/settings/notifications/Notifications.tsx
+++ b/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) {
-
+
diff --git a/src/app/phoneHit.settingsA.test.ts b/src/app/phoneHit.settingsA.test.ts
new file mode 100644
index 00000000..37f1f3c2
--- /dev/null
+++ b/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 = {
+ '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);
+ });
+});