From d2250b99d1ad313cd834abb09fcc7d179926d2f1 Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Tue, 21 Apr 2026 17:51:35 +0000
Subject: [PATCH] Fix clock placement and display issues in different screen
 sizes and orientations

Adjust clock positioning logic to correctly handle large clock sizes and RTL layouts, ensuring it displays properly on the screen.
---
 artifacts/teaboy-os/src/pages/home.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/artifacts/teaboy-os/src/pages/home.tsx b/artifacts/teaboy-os/src/pages/home.tsx
index 882631c4..f4b9b8c3 100644
--- a/artifacts/teaboy-os/src/pages/home.tsx
+++ b/artifacts/teaboy-os/src/pages/home.tsx
@@ -167,6 +167,10 @@ function SortableClockTile({
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: CLOCK_TILE_ID,
   });
+  const isLarge = size === "large";
+  const px = isLarge ? 168 : 78;
+  const effectivePinColumn =
+    pinColumn && isLarge ? Math.max(pinColumn - 1, 1) : pinColumn;
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -215,11 +219,6 @@ function SortableClockTile({
     startPos.current = null;
   };
 
-  const isLarge = size === "large";
-  const px = isLarge ? 168 : 78;
-  const effectivePinColumn =
-    pinColumn && isLarge ? Math.max(pinColumn - 1, 1) : pinColumn;
-
   const { onPointerDown: _ignored, ...restListeners } = listeners ?? {};
 
   return (