From 351d1bc74539201221ea428b8aeb975af2111d14 Mon Sep 17 00:00:00 2001
From: Void <void@gamecult.org>
Date: Fri, 13 Nov 2026 07:15:10 +0000
Subject: [PATCH] Phone hit: call controls get their hit-area variants, with a
 test pinning them

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/app/features/call-status/CallControl.tsx |  5 +++++
 src/app/features/call/CallControls.tsx       |  2 ++
 src/app/features/call/Controls.tsx           |  6 ++++++
 src/app/phoneHit.call.test.ts                | 15 +++++++++++++++
 4 files changed, 28 insertions(+)
 create mode 100644 src/app/phoneHit.call.test.ts

diff --git a/src/app/features/call-status/CallControl.tsx b/src/app/features/call-status/CallControl.tsx
index 3cf38b1f..d63f8709 100644
--- a/src/app/features/call-status/CallControl.tsx
+++ b/src/app/features/call-status/CallControl.tsx
@@ -5,6 +5,7 @@ import { StatusDivider } from './components';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
+import { PhoneHitSpread26 } from '../../styles/PhoneHit.css';
 
 type MicrophoneButtonProps = {
   enabled: boolean;
@@ -26,6 +27,7 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -59,6 +61,7 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -99,6 +102,7 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
@@ -136,6 +140,7 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread26}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
diff --git a/src/app/features/call/CallControls.tsx b/src/app/features/call/CallControls.tsx
index fb56adca..2e9956da 100644
--- a/src/app/features/call/CallControls.tsx
+++ b/src/app/features/call/CallControls.tsx
@@ -25,6 +25,7 @@ import {
   SoundButton,
   VideoButton,
 } from './Controls';
+import { PhoneHitSpread40 } from '../../styles/PhoneHit.css';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { stopPropagation } from '../../utils/keyboard';
@@ -169,6 +170,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               }
             >
               <IconButton
+                className={PhoneHitSpread40}
                 variant="Surface"
                 fill="Soft"
                 radii="400"
diff --git a/src/app/features/call/Controls.tsx b/src/app/features/call/Controls.tsx
index 459904f6..560ed8e5 100644
--- a/src/app/features/call/Controls.tsx
+++ b/src/app/features/call/Controls.tsx
@@ -4,6 +4,7 @@ import { useAtom } from 'jotai';
 import * as css from './styles.css';
 import { callChatAtom } from '../../state/callEmbed';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { PhoneHitSpread40 } from '../../styles/PhoneHit.css';
 
 export function ControlDivider() {
   return (
@@ -31,6 +32,7 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -64,6 +66,7 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Surface' : 'Warning'}
           fill="Soft"
@@ -103,6 +106,7 @@ export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
@@ -140,6 +144,7 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={enabled ? 'Success' : 'Surface'}
           fill="Soft"
@@ -170,6 +175,7 @@ export function ChatButton() {
     >
       {(anchorRef) => (
         <IconButton
+          className={PhoneHitSpread40}
           ref={anchorRef}
           variant={chat ? 'Success' : 'Surface'}
           fill="Soft"
diff --git a/src/app/phoneHit.call.test.ts b/src/app/phoneHit.call.test.ts
new file mode 100644
index 00000000..56971b05
--- /dev/null
+++ b/src/app/phoneHit.call.test.ts
@@ -0,0 +1,15 @@
+import { describe, it } from 'vitest';
+import { expectPhoneHitClasses, expectSizeTie } from './phoneHitTestKit';
+
+// Every IconButton of the call bars carries the phone hit-area variant of its drawn size, in source order
+// (mic, sound, video, share, chat; the menu button; the call-status mic, sound, video, share).
+describe('icon buttons in the call controls', () => {
+  it.each([
+    ['features/call/Controls.tsx', Array(5).fill('PhoneHitSpread40')],
+    ['features/call/CallControls.tsx', ['PhoneHitSpread40']],
+    ['features/call-status/CallControl.tsx', Array(4).fill('PhoneHitSpread26')],
+  ])('%s', (file, want) => {
+    expectPhoneHitClasses(file as string, want as string[]);
+    expectSizeTie(file as string);
+  });
+});
-- 
2.47.3