From 9f944e531abfa9090da85bbf8ee3291cf9614e50 Mon Sep 17 00:00:00 2001
From: Jeet Debnath <jeet.debnath2004@gmail.com>
Date: Tue, 21 Apr 2026 10:49:13 +0530
Subject: [PATCH] clock ui update

---
 src/components/ClockTimePicker.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ClockTimePicker.tsx b/src/components/ClockTimePicker.tsx
index f0aea4a..49cdcaa 100644
--- a/src/components/ClockTimePicker.tsx
+++ b/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