Commit 930aec13da56f83c404bc00d92486b2409a5cac0 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-10-03 22:45:53-07:00
committer	GitHub <noreply@github.com> 2026-10-03 22:45:53-07:00
log	930aec13da56f83c404bc00d92486b2409a5cac0
tree	c11c30c894f4ba95fa047237a811e37781027567
parent	fe93a5dbdd3c4496f402f71d232597c391c4973b
signature	Signed by PGP key B5690EEEBB952194

fix(mobile): keep the dictation timer from shifting width (#15504)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

2 files changed, 33 insertions(+), 22 deletions(-)

apps
- mobile
  - src
    features
    voice-input
    ComposerDictationControl.tsx
    GlobalVoiceInputControl.tsx

apps/mobile/src/features/voice-input/ComposerDictationControl.tsx+24-8

 @@ -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 (
+    <SystemText
+      className={cn("text-xs", props.className)}
+      numberOfLines={1}
+      style={{ fontVariant: ["tabular-nums"] }}
+    >
+      {Math.floor(props.seconds / 60)}:{String(props.seconds % 60).padStart(2, "0")}
+    </SystemText>
+  );
+}
 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 (
     <View className="relative h-11 min-w-0 flex-1 justify-center">
       {isError ? (
 @@ -357,13 +376,10 @@ export function ComposerDictationStatus(props: {
             style={waveformStyle}
           >
             <VoiceWaveform audioLevels={props.audioLevels} />
-            <Text
+            <DictationElapsedTime
-              className="text-xs text-foreground-muted"
+              className="text-foreground-muted"
-              numberOfLines={1}
+              seconds={props.elapsedSeconds}
-              style={{ fontVariant: ["tabular-nums"] }}
+            />
-            >
-              {elapsedLabel}
-            </Text>
           </Animated.View>
           <Animated.View className="absolute inset-0 justify-center px-2" style={labelStyle}>
             <Text className="text-center text-sm text-foreground-muted" numberOfLines={1}>

apps/mobile/src/features/voice-input/GlobalVoiceInputControl.tsx+9-14

 @@ -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 (
     <View pointerEvents="box-none" className="absolute inset-0">
 @@ -149,12 +148,10 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void)
               ) : phase === "recording" ? (
                 <>
                   <View className="size-2 rounded-full bg-danger-foreground" />
-                  <Text
+                  <DictationElapsedTime
-                    className="text-xs text-foreground"
+                    className="text-foreground"
-                    style={{ fontVariant: ["tabular-nums"] }}
+                    seconds={voice.elapsedSeconds}
-                  >
+                  />
-                    {elapsedLabel}
-                  </Text>
                 </>
               ) : (
                 <ActivityIndicator size="small" colorClassName="accent-icon-muted" />
 @@ -202,12 +199,10 @@ function EdgeDictationPill(props: { readonly collapseRef: RefObject<(() => void)
             {phase === "recording" ? (
               <>
                 <CompactVoiceWaveform audioLevels={voice.audioLevels} />
-                <Text
+                <DictationElapsedTime
-                  className="text-xs text-foreground-muted"
+                  className="text-foreground-muted"
-                  style={{ fontVariant: ["tabular-nums"] }}
+                  seconds={voice.elapsedSeconds}
-                >
+                />
-                  {elapsedLabel}
-                </Text>
                 <Pressable
                   accessibilityLabel="Finish dictation"
                   accessibilityRole="button"