Bottom-anchor the Alt hint and copy popup on drag-up

Drag-up used to compute `top` by subtracting a per-element height
estimate, so the popup (~32px est) sat 12px closer to the selection
than the hint (~44px est). Now both elements anchor their BOTTOM
edge via CSS `bottom`, so heights cancel out and the popup lands
exactly where the hint was. Symmetric with drag-down, which
already top-anchors via a height-free formula.

Also shift the drag-up anchor up by one full cell, so the row
adjacent to the selection stays visible on both sides — matching
the +2-row offset on the drag-down top-anchored path.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: nedtwigg

lib/src/components/SelectionOverlay.tsx

@@ -140,34 +140,32 @@ export function SelectionOverlay({ terminalId }: Props) {
 
   // Mid-drag hint. Placed outside the selection on the side opposite the
   // drag direction: below when the user drags down, above when they drag up.
-  // When the preferred side would clip the viewport, clamp to the viewport
-  // edge on the SAME side — never flip sides, because that puts the hint
-  // inside the selection and causes it to bounce as the mouse jitters near
-  // the edge. Shown only while the user is dragging (spec §3.3).
-  const HINT_EST_HEIGHT = 44;
-  let hint: { left: number; top: number } | null = null;
+  // Drag-down anchors by `top` (top edge aligned with where we want the
+  // near-selection edge); drag-up anchors by `bottom` so the near-selection
+  // edge lines up regardless of element height — this keeps the hint and
+  // the copy popup visually coincident, since the popup uses the same
+  // anchoring rules. Shown only while the user is dragging (spec §3.3).
+  let hint: { left: number; top?: number; bottom?: number } | null = null;
   if (selection.dragging) {
     const endViewportRow = selection.endRow - dims.viewportY;
     if (endViewportRow >= 0 && endViewportRow < dims.rows) {
       const draggedDown = selection.endRow >= selection.startRow;
-      // Leave one full cell of gap between the selection and the hint so
-      // the next-to-be-selected line stays visible on both sides. The
-      // drag-up side already feels like "2 lines above" because the
-      // hint's own height (~44px) extends it away from the selection;
-      // matching that on the drag-down side means skipping one extra row.
-      const top = draggedDown
-        ? Math.min(
-            gridTop + (endViewportRow + 2) * cellHeight + 4,
-            dims.elementHeight - HINT_EST_HEIGHT - 4,
-          )
-        : Math.max(
-            gridTop + endViewportRow * cellHeight - HINT_EST_HEIGHT - 4,
-            4,
-          );
-      hint = {
-        left: Math.min(dims.elementWidth - 180, Math.max(4, gridLeft + selection.endCol * cellWidth)),
-        top,
-      };
+      const left = Math.min(dims.elementWidth - 180, Math.max(4, gridLeft + selection.endCol * cellWidth));
+      if (draggedDown) {
+        const top = Math.min(
+          gridTop + (endViewportRow + 2) * cellHeight + 4,
+          dims.elementHeight - 24,
+        );
+        hint = { left, top };
+      } else {
+        // Anchor the element's bottom edge one full cell above the
+        // selection — symmetric with the drag-down +2-row offset — so the
+        // row adjacent to the selection stays visible. Clamp the anchor y
+        // so there's at least ~24px of room above it for the hint to
+        // render inside the viewport.
+        const y = Math.max(gridTop + (endViewportRow - 1) * cellHeight - 4, 28);
+        hint = { left, bottom: dims.elementHeight - y };
+      }
     }
   }
 
@@ -193,7 +191,7 @@ export function SelectionOverlay({ terminalId }: Props) {
       {hint && (
         <div
           className="pointer-events-none absolute rounded border border-border bg-surface-raised px-1.5 py-0.5 text-xs text-muted shadow-sm"
-          style={{ left: hint.left, top: hint.top }}
+          style={{ left: hint.left, top: hint.top, bottom: hint.bottom }}
         >
           <div>Hold {IS_MAC ? 'Opt' : 'Alt'} for block selection</div>
           {state.hintToken && (

lib/src/components/SelectionPopup.tsx

@@ -27,7 +27,7 @@ export function SelectionPopup({ terminalId }: Props) {
   const selection = state.selection;
   const shouldRender = !!selection && !selection.dragging;
 
-  const [anchor, setAnchor] = useState<{ left: number; top: number } | null>(null);
+  const [anchor, setAnchor] = useState<{ left: number; top?: number; bottom?: number } | null>(null);
 
   useLayoutEffect(() => {
     if (!shouldRender || !selection) {
@@ -41,30 +41,26 @@ export function SelectionPopup({ terminalId }: Props) {
     const { cellWidth, cellHeight, gridLeft, gridTop } = dims;
     const endViewportRow = selection.endRow - dims.viewportY;
     const endRow = Math.max(0, Math.min(dims.rows - 1, endViewportRow));
-    // Place the popup outside the selection on the side opposite the drag
-    // direction. When the preferred side would clip the viewport, clamp to
-    // the viewport edge on the SAME side — never flip, because that puts
-    // the popup inside the selection and causes it to bounce with mouse
-    // jitter at the edge.
-    const POPUP_EST_HEIGHT = 32;
+    // Place the popup on the side opposite the drag direction, matching
+    // exactly where the Alt hint sat. Drag-down anchors by `top`, drag-up
+    // anchors by `bottom` — that way both elements have their near-
+    // selection edge at the same y regardless of their heights. Without
+    // this, the popup (shorter than the hint) would appear closer to the
+    // selection than the hint did on drag-up.
     const draggedDown = selection.endRow >= selection.startRow;
-    // Leave one full cell of gap between the selection and the popup so
-    // the line adjacent to the selection stays visible. Matches the
-    // visual weight of the above-side where the popup's own height
-    // naturally extends it away from the selection.
-    const top = draggedDown
-      ? Math.min(
-          gridTop + (endRow + 2) * cellHeight + 4,
-          dims.elementHeight - POPUP_EST_HEIGHT - 4,
-        )
-      : Math.max(
-          gridTop + endRow * cellHeight - POPUP_EST_HEIGHT - 4,
-          4,
-        );
-    setAnchor({
-      left: Math.min(dims.elementWidth - 300, Math.max(0, gridLeft + selection.endCol * cellWidth)),
-      top,
-    });
+    const left = Math.min(dims.elementWidth - 300, Math.max(0, gridLeft + selection.endCol * cellWidth));
+    if (draggedDown) {
+      const top = Math.min(
+        gridTop + (endRow + 2) * cellHeight + 4,
+        dims.elementHeight - 24,
+      );
+      setAnchor({ left, top });
+    } else {
+      // Bottom-anchored one full cell above the selection — symmetric with
+      // the drag-down +2-row offset on the top-anchored side.
+      const y = Math.max(gridTop + (endRow - 1) * cellHeight - 4, 28);
+      setAnchor({ left, bottom: dims.elementHeight - y });
+    }
   }, [terminalId, shouldRender, selection]);
 
   useEffect(() => {
@@ -103,6 +99,7 @@ export function SelectionPopup({ terminalId }: Props) {
     position: 'absolute',
     left: anchor.left,
     top: anchor.top,
+    bottom: anchor.bottom,
     zIndex: 20,
   };