clock ui update

src/components/ClockTimePicker.tsx

@@ -238,17 +238,24 @@ export default function ClockTimePicker({ value, onChange, disabled }: Props) {
         <circle cx={handTip.x} cy={handTip.y} r={TIP_RADIUS} className="clock-picker__hand-tip" />
 
         {mode === 'hours' && hourPositions.map(({ h, x, y }) => (
+          h === selectedNum ? null :
           <text key={h} x={x} y={y} textAnchor="middle" dominantBaseline="central"
-            className={`clock-picker__num${h === selectedNum ? ' clock-picker__num--selected' : ''}`}
+            className="clock-picker__num"
           >{h}</text>
         ))}
 
         {mode === 'minutes' && minutePositions.map(({ m, x, y }) => (
+          m === selectedNum ? null :
           <text key={m} x={x} y={y} textAnchor="middle" dominantBaseline="central"
-            className={`clock-picker__num${m === selectedNum ? ' clock-picker__num--selected' : ''}`}
+            className="clock-picker__num"
           >{m.toString().padStart(2, '0')}</text>
         ))}
 
+        {/* Selected number rendered at hand tip so it sits centered in the green circle */}
+        <text x={handTip.x} y={handTip.y} textAnchor="middle" dominantBaseline="central"
+          className="clock-picker__num clock-picker__num--selected"
+        >{mode === 'hours' ? selectedNum : selectedNum.toString().padStart(2, '0')}</text>
+
         {mode === 'minutes' && Array.from({ length: 60 }, (_, i) => {
           if (i % 5 === 0) return null
           const angle = (i / 60) * 360