From e7bf447e76a810e1222642b97730d27d29e997a3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 7 Nov 2026 12:15:29 +0000
Subject: [PATCH] design-audit: share phoneBarTitleSx for the phone batch
 top-bar titles (17px vs 18px drift)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WA2AWi6uXnyKxv5mEQsZnT
---
 frontend/src/components/batch/phone/PhoneGrid.tsx | 3 ++-
 frontend/src/components/batch/phone/PhoneStep.tsx | 4 ++--
 frontend/src/components/common/layoutSx.ts        | 3 +++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/batch/phone/PhoneGrid.tsx b/frontend/src/components/batch/phone/PhoneGrid.tsx
index 78904329..2b6a58ac 100644
--- a/frontend/src/components/batch/phone/PhoneGrid.tsx
+++ b/frontend/src/components/batch/phone/PhoneGrid.tsx
@@ -31,6 +31,7 @@ import {
   coverImageSx,
   miniIconSx,
   overlayBadgeSx,
+  phoneBarTitleSx,
   touchTarget,
   tallRowMinHeight,
   touchTargetLarge,
@@ -277,7 +278,7 @@ export function PhoneGrid({
             <IconButton color="inherit" onClick={onClearSelection} aria-label="Clear selection">
               <CloseIcon />
             </IconButton>
-            <Typography role="status" sx={{ flex: 1, fontWeight: 700, fontSize: 18 }}>
+            <Typography role="status" sx={{ flex: 1, ...phoneBarTitleSx }}>
               {picked.length} selected
             </Typography>
             <Button
diff --git a/frontend/src/components/batch/phone/PhoneStep.tsx b/frontend/src/components/batch/phone/PhoneStep.tsx
index 5d46a378..972278f1 100644
--- a/frontend/src/components/batch/phone/PhoneStep.tsx
+++ b/frontend/src/components/batch/phone/PhoneStep.tsx
@@ -3,7 +3,7 @@
 import type { ReactNode } from "react";
 import { Box, Button, IconButton, Typography, type ButtonProps } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { phoneCaptionFontSize } from "../../common/layoutSx";
+import { phoneBarTitleSx, phoneCaptionFontSize } from "../../common/layoutSx";
 
 /** Clears the home indicator on phones that draw one over the page. */
 const SAFE_BOTTOM = "env(safe-area-inset-bottom, 0px)";
@@ -112,7 +112,7 @@ export function PhoneStep({
           <ArrowBackIcon />
         </IconButton>
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography component="h1" noWrap sx={{ fontWeight: 700, fontSize: 17 }}>
+          <Typography component="h1" noWrap sx={phoneBarTitleSx}>
             {title}
           </Typography>
           {subtitle && (
diff --git a/frontend/src/components/common/layoutSx.ts b/frontend/src/components/common/layoutSx.ts
index 84584f96..8bc9922b 100644
--- a/frontend/src/components/common/layoutSx.ts
+++ b/frontend/src/components/common/layoutSx.ts
@@ -27,6 +27,9 @@ export const finePrintFontSize = "0.65rem";
 /** Secondary-line font size on the phone batch screens (row labels, subtitles, tab captions). */
 export const phoneCaptionFontSize = 13;
 
+/** Title text in the phone batch top bars (step header, selection-mode bar). */
+export const phoneBarTitleSx = { fontWeight: 700, fontSize: 17 } as const;
+
 /** Pill-ish corner radius shared by the header action buttons (nav links, "Log in", "Add observation"). */
 export const pillButtonSx = { borderRadius: 2 } as const;