diff --git a/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx b/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx
index f27d2359639ad9aba499902438986ab139d13758..ab5476aa4ce22b4105c1a3119105283812cc73e1 100644
--- a/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx
+++ b/apps/mobile/src/features/voice-input/ComposerDictationControl.tsx
@@ -5,6 +5,7 @@ import {
Linking,
Platform,
Pressable,
+ Text as SystemText,
View,
type LayoutChangeEvent,
} from "react-native";
@@ -245,6 +246,25 @@ const VoiceWaveform = memo(function VoiceWaveform(props: {
);
});
+/**
+ * Renders the recording time in the system font: DM Sans has no tabular
+ * figures, so `tabular-nums` alone would still let the width jitter.
+ */
+export function DictationElapsedTime(props: {
+ readonly seconds: number;
+ readonly className?: string;
+}) {
+ return (
+
+ {Math.floor(props.seconds / 60)}:{String(props.seconds % 60).padStart(2, "0")}
+
+ );
+}
+
function VoiceActionButton(props: {
readonly accessibilityLabel: string;
readonly disabled?: boolean;
@@ -322,7 +342,6 @@ export function ComposerDictationStatus(props: {
if (!props.presentation.statusLabel) return null;
const isError = props.presentation.statusKind === "error";
- const elapsedLabel = `${Math.floor(props.elapsedSeconds / 60)}:${String(props.elapsedSeconds % 60).padStart(2, "0")}`;
return (
{isError ? (
@@ -357,13 +376,10 @@ export function ComposerDictationStatus(props: {
style={waveformStyle}
>
-
- {elapsedLabel}
-
+
diff --git a/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx b/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx
index 4159041e285380211aa46cdf7c7bb4faf8b3449b..e08afc06a15f2c51f92417053f9c4031acdd6d14 100644
--- a/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx
+++ b/apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx
@@ -24,7 +24,7 @@ import { AppText as Text } from "../../components/AppText";
import { SymbolView } from "../../components/AppSymbol";
import { useAndroidControlSizing } from "../../components/useAndroidControlSizing";
import { cn } from "../../lib/cn";
-import { CompactVoiceWaveform } from "./ComposerDictationControl";
+import { CompactVoiceWaveform, DictationElapsedTime } from "./ComposerDictationControl";
import { useGlobalVoiceInput } from "./VoiceInputProvider";
import { resolveVoiceComposerPresentation } from "./voiceInputPresentation";
@@ -114,7 +114,6 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void)
const isError = phase === "error";
const openSettings = isError && voice.state.errorAction === "settings";
const label = voice.label ?? "Draft";
- const elapsedLabel = `${Math.floor(voice.elapsedSeconds / 60)}:${String(voice.elapsedSeconds % 60).padStart(2, "0")}`;
return (
@@ -149,12 +148,10 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void)
) : phase === "recording" ? (
<>
-
- {elapsedLabel}
-
+
>
) : (
@@ -202,12 +199,10 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void)
{phase === "recording" ? (
<>
-
- {elapsedLabel}
-
+