From e4f2fd71006763e7da3066772d5f4e6759bddb7a Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Tue, 13 Jan 2026 10:50:19 -0500
Subject: [PATCH] fix: Reduce clock size by 10% and remove circular border

- Reduced clock from 112px (w-28) to 96px (w-24) - 10% smaller
- Removed circular border (border-2 border-text-muted/20)
- Adjusted all clock elements proportionally:
  - Hour markers: transform origin 46px (from 52px)
  - Hour hand: h-9 (from h-10)
  - Minute hand: h-11 (from h-12)
  - Second hand: h-12 (from h-14)
- Cleaner, minimalist appearance
- Better fit in 160x140px widget tile
---
 .../src/components/Layout/CondensedNavigation.tsx   | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/ui/desktop/src/components/Layout/CondensedNavigation.tsx b/ui/desktop/src/components/Layout/CondensedNavigation.tsx
index 56c4334a81..d17f9b1afd 100644
--- a/ui/desktop/src/components/Layout/CondensedNavigation.tsx
+++ b/ui/desktop/src/components/Layout/CondensedNavigation.tsx
@@ -190,17 +190,14 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
 
     return (
       <div className="w-full h-full flex items-center justify-center">
-        <div className="relative w-28 h-28">
-          {/* Clock face */}
-          <div className="absolute inset-0 rounded-full border-2 border-text-muted/20" />
-          
+        <div className="relative w-24 h-24">
           {/* Hour markers */}
           {[...Array(12)].map((_, i) => (
             <div
               key={i}
               className="absolute w-1 h-3 bg-text-muted/40 top-2 left-1/2 -translate-x-1/2"
               style={{
-                transformOrigin: '50% 52px',
+                transformOrigin: '50% 46px',
                 transform: `translateX(-50%) rotate(${i * 30}deg)`,
               }}
             />
@@ -208,7 +205,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
           
           {/* Hour hand */}
           <div
-            className="absolute w-1.5 h-10 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
+            className="absolute w-1.5 h-9 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
             style={{
               transform: `translateX(-50%) translateY(-100%) rotate(${hourAngle}deg)`,
             }}
@@ -216,7 +213,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
           
           {/* Minute hand */}
           <div
-            className="absolute w-1 h-12 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
+            className="absolute w-1 h-11 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
             style={{
               transform: `translateX(-50%) translateY(-100%) rotate(${minuteAngle}deg)`,
             }}
@@ -224,7 +221,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
           
           {/* Second hand */}
           <div
-            className="absolute w-0.5 h-14 bg-red-500 rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
+            className="absolute w-0.5 h-12 bg-red-500 rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
             style={{
               transform: `translateX(-50%) translateY(-100%) rotate(${secondAngle}deg)`,
             }}