From 0d18077766c1a2597365b4a7db64640103bfc4b6 Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Tue, 21 Apr 2026 17:50:23 +0000
Subject: [PATCH] Adjust the large clock's default position to the far left in
 RTL view

Set the large clock's starting column to ensure it spans the last two columns in RTL, visually pinning it to the leftmost position.
---
 artifacts/teaboy-os/src/pages/home.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/artifacts/teaboy-os/src/pages/home.tsx b/artifacts/teaboy-os/src/pages/home.tsx
index 4caae1e7..882631c4 100644
--- a/artifacts/teaboy-os/src/pages/home.tsx
+++ b/artifacts/teaboy-os/src/pages/home.tsx
@@ -173,8 +173,8 @@ function SortableClockTile({
     opacity: isDragging ? 0.6 : 1,
     zIndex: isDragging ? 20 : "auto",
     touchAction: "none",
-    ...(pinColumn && !isDragging
-      ? { gridColumnStart: pinColumn, gridRowStart: 1 }
+    ...(effectivePinColumn && !isDragging
+      ? { gridColumnStart: effectivePinColumn, gridRowStart: 1 }
       : {}),
   };
 
@@ -217,6 +217,8 @@ function SortableClockTile({
 
   const isLarge = size === "large";
   const px = isLarge ? 168 : 78;
+  const effectivePinColumn =
+    pinColumn && isLarge ? Math.max(pinColumn - 1, 1) : pinColumn;
 
   const { onPointerDown: _ignored, ...restListeners } = listeners ?? {};