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

@@ -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 (