feat(mobile): Date 2/3 · Duration 1/3 row; drop redundant '(min)' label

- 'min' already rides the value, so the field label is just 'Duration'.
- Date takes 2/3 of the row, Duration 1/3 (Date benefits from the width;
  the timer is a compact stepper).
- Slim DurationField to fit the 1/3 column: w-8 ± end caps, smaller 'min',
  dropped the invisible centering balancer (no room) — no clipping at 1–3
  digits.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ccq3rvfb9ArzS2DidghJm5

Author: Cawlumm

mobile/app/(tabs)/workouts/[id]/edit.tsx

@@ -259,7 +259,7 @@ export default function EditWorkout() {
           {/* Date + duration share a row (matches the Log form). Editing the date only
               shifts the day; the original time-of-day is preserved on submit. */}
           <View className="flex-row gap-3">
-            <View className="flex-1">
+            <View className="flex-[2]">
               <FieldHeader icon={CalendarDays} label="Date" />
               <DateInput
                 value={formData.date}
@@ -268,14 +268,8 @@ export default function EditWorkout() {
               />
             </View>
             <View className="flex-1">
-              <FieldHeader
-                icon={Clock}
-                label="Duration (min)"
-                // h/m readout only once it means something — "0h 5m" is noise.
-                hint={formData.duration >= 60
-                  ? `= ${Math.floor(formData.duration / 60)}h ${formData.duration % 60}m`
-                  : undefined}
-              />
+              {/* "min" already rides the value, so the label stays just "Duration". */}
+              <FieldHeader icon={Clock} label="Duration" />
               <DurationField
                 value={formData.duration}
                 onChange={(m) => setFormData((prev) => ({ ...prev, duration: m }))}

mobile/app/(tabs)/workouts/new.tsx

@@ -240,7 +240,7 @@ export default function AddWorkout() {
               half column; DateInput opens its picker in a full-width Modal so the
               half-width trigger doesn't crush the calendar. */}
           <View className="flex-row gap-3">
-            <View className="flex-1">
+            <View className="flex-[2]">
               <FieldHeader icon={CalendarDays} label="Date" />
               <DateInput
                 value={formData.date}
@@ -249,14 +249,8 @@ export default function AddWorkout() {
               />
             </View>
             <View className="flex-1">
-              <FieldHeader
-                icon={Clock}
-                label="Duration (min)"
-                // h/m readout only once it means something — "0h 5m" is noise.
-                hint={formData.duration >= 60
-                  ? `= ${Math.floor(formData.duration / 60)}h ${formData.duration % 60}m`
-                  : undefined}
-              />
+              {/* "min" already rides the value, so the label stays just "Duration". */}
+              <FieldHeader icon={Clock} label="Duration" />
               <DurationField
                 value={formData.duration}
                 onChange={(m) => setFormData((prev) => ({ ...prev, duration: m }))}

mobile/src/components/workouts/DurationField.tsx

@@ -31,16 +31,14 @@ export function DurationField({ value, onChange, inputAccessoryViewID }: {
         accessibilityLabel="Decrease duration"
         onPress={() => step(-STEP)}
         disabled={!canDec}
-        className={`w-11 items-center justify-center border-r border-surface-border active:bg-surface-muted ${canDec ? '' : 'opacity-40'}`}
+        className={`w-8 items-center justify-center border-r border-surface-border active:bg-surface-muted ${canDec ? '' : 'opacity-40'}`}
       >
-        <Minus size={18} color={canDec ? accent : colors.txMuted} strokeWidth={2.4} />
+        <Minus size={16} color={canDec ? accent : colors.txMuted} strokeWidth={2.4} />
       </Pressable>
 
-      {/* An invisible "min" on the left balances the real one on the right, so the
-          value is flanked by equal widths and sits dead-center in the segment — no
-          matter the digit count — while "min" still reads to its right (no overlap). */}
+      {/* The value + "min" read as one centered group. This column is only ~1/3 of the
+          row, so the control stays compact: slim ± end caps and a small "min". */}
       <View className="flex-1 flex-row items-center justify-center">
-        <Text className="mr-1 font-sans text-sm opacity-0" style={{ lineHeight: LINE }} aria-hidden>min</Text>
         <TextInput
           value={value ? String(value) : ''}
           onChangeText={(t) => onChange(Number(t.replace(/[^0-9]/g, '')) || 0)}
@@ -55,13 +53,12 @@ export function DurationField({ value, onChange, inputAccessoryViewID }: {
           // Share one lineHeight across the value + "min" so items-center lines up
           // their text boxes exactly (iOS renders placeholder/value low otherwise).
           // includeFontPadding:false drops Android's extra glyph padding.
-          style={{ fontVariant: ['tabular-nums'], minWidth: 16, maxWidth: 44, lineHeight: LINE, includeFontPadding: false }}
+          style={{ fontVariant: ['tabular-nums'], minWidth: 14, maxWidth: 40, lineHeight: LINE, includeFontPadding: false }}
         />
-        {/* Nudge "min" down to sit on the value's optical line. The bold value renders
-            low within its line box on iOS (web centers it, so this looks slightly low
-            in the harness but correct on device); transform keeps it out of layout. */}
+        {/* Nudge "min" down to sit on the value's optical line (the bold value renders
+            low within its line box on iOS); transform keeps it out of layout. */}
         <Text
-          className="ml-1 font-sans text-sm text-tx-muted"
+          className="ml-0.5 font-sans text-xs text-tx-muted"
           style={{ lineHeight: LINE, transform: [{ translateY: MIN_NUDGE }] }}
         >
           min
@@ -72,9 +69,9 @@ export function DurationField({ value, onChange, inputAccessoryViewID }: {
         accessibilityRole="button"
         accessibilityLabel="Increase duration"
         onPress={() => step(STEP)}
-        className="w-11 items-center justify-center border-l border-surface-border active:bg-surface-muted"
+        className="w-8 items-center justify-center border-l border-surface-border active:bg-surface-muted"
       >
-        <Plus size={18} color={accent} strokeWidth={2.4} />
+        <Plus size={16} color={accent} strokeWidth={2.4} />
       </Pressable>
     </View>
   )