Offset the dragged copy below right of the pointer (Feature 14)

The floating copy sat where it was grabbed, over the hovered day's
"Drop to swap / Replaces ..." text. It now floats 48 px below and to
the right of the pointer, flipping left or up where it would leave the
viewport, so the day's current dinner stays readable during a drag.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/plan/drag.tsx

@@ -195,14 +195,32 @@ function dateAt(x: number, y: number): string | null {
 // not one.
 const DRAG_THRESHOLD = 4
 
-// Press is a pointer held on a draggable: its id, where it went down, how
-// far that was from the draggable's top left, and whether it has become a
-// drag.
-type Press = { pointerId: number; x: number; y: number; dx: number; dy: number; width: number; dragging: boolean }
+// The dragged copy floats this far below and to the right of the pointer,
+// as a drag image does, so it stays clear of the "Drop to swap" text
+// centred in the day the pointer is over. Where it would leave the viewport it flips to the
+// left of the pointer, or above it.
+const FLOAT_OFFSET = 48
+
+// Press is a pointer held on a draggable: its id, where it went down, the
+// draggable's size, and whether it has become a drag.
+type Press = { pointerId: number; x: number; y: number; width: number; height: number; dragging: boolean }
 
 // Float is where the dragged copy of a draggable is drawn, and how wide.
 export type Float = { left: number; top: number; width: number }
 
+// floatAt is where the dragged copy of the held draggable is drawn for the
+// pointer at (x, y): offset below right of it, flipped where that would
+// leave the viewport.
+function floatAt(held: Press, x: number, y: number): Float {
+  const right = x + FLOAT_OFFSET
+  const below = y + FLOAT_OFFSET
+  return {
+    left: right + held.width > window.innerWidth ? x - FLOAT_OFFSET - held.width : right,
+    top: below + held.height > window.innerHeight ? y - FLOAT_OFFSET - held.height : below,
+    width: held.width,
+  }
+}
+
 // useDraggable makes a panel row or a strip chip a draggable dinner. With a
 // pointer it is pressed, captured and moved past DRAG_THRESHOLD to pick it
 // up, its copy floats with the pointer, and letting go over a day drops it
@@ -243,9 +261,8 @@ export function useDraggable(pickup: Pickup) {
       pointerId: event.pointerId,
       x: event.clientX,
       y: event.clientY,
-      dx: event.clientX - rect.left,
-      dy: event.clientY - rect.top,
       width: rect.width,
+      height: rect.height,
       dragging: false,
     }
   }
@@ -261,7 +278,7 @@ export function useDraggable(pickup: Pickup) {
       }
       held.dragging = true
     }
-    setFloat({ left: event.clientX - held.dx, top: event.clientY - held.dy, width: held.width })
+    setFloat(floatAt(held, event.clientX, event.clientY))
     plan.over(dateAt(event.clientX, event.clientY))
   }