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.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d13a5b95-5806-4d14-8588-81f7e67a4eac
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/PwtbShH
Replit-Helium-Checkpoint-Created: true

.replit

@@ -51,6 +51,10 @@ externalPort = 80
 localPort = 8082
 externalPort = 3003
 
+[[ports]]
+localPort = 8083
+externalPort = 5173
+
 [[ports]]
 localPort = 25785
 externalPort = 3000
@@ -59,5 +63,9 @@ externalPort = 3000
 localPort = 25786
 externalPort = 3002
 
+[[ports]]
+localPort = 25787
+externalPort = 5000
+
 [nix]
 channel = "stable-25_05"

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 ?? {};