fix(search-results, shell): rail rows fit the rail; flow resize-drag tracks the pointer 1:1

Two more live-use findings on the queue evening.

Rail overflow (search-results): grid/flex children default to
min-width:auto and refuse to shrink below content, so a long nowrap
result title pushed the whole card wider than the rail — cutting off
the right side, ➕ included. min-width:0 down the list chains,
overflow-x hidden on the rail, overflow-wrap on snippets; titles now
ellipsize inside the 340px rail and every ➕ is reachable.

Flow resize-drag (shell): the focused-panel edge drag computed width as
distance-from-stage-centre × 2, which assumes a centred panel — on the
rotation's first/last step it jumped ~10% the instant you grabbed and
tracked 2× per pixel; mid-drag the pointer also crossed the peek
overlay, whose hover-expand fought the drag geometry. Now the dragged
edge's stage position maps per-arrangement (centred → symmetric
doubling; edge-anchored → the position IS the width), the edge takes
pointer capture, hover-expand is suppressed while resizing, and only
sides that actually border a peek render an edge. Verified live:
pointer at 50/65/80% of the stage → panel at exactly 50/65/80%.

Files changed:
- apps/search-results/src/app.css
- shell/src/App.svelte

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013u3i9BoKeZRndqToQ3M5Q5

Author: mpstaton

apps/search-results/src/app.css

@@ -8,9 +8,22 @@
   padding: 0.5rem 0.75rem 2rem;
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
   box-sizing: border-box;
 }
 
+/* Grid/flex children default to min-width:auto and refuse to shrink below
+   their content — a long nowrap title then pushes the whole card wider than
+   the rail and shoves the ➕ off-screen. Zero the min-width down the chain
+   so ellipsis/wrap rules actually get to do their jobs. */
+.srq-list > *,
+.srq-results > *,
+.srq-staged-list > *,
+.srq-gate-list > *,
+.srq-card-body {
+  min-width: 0;
+}
+
 .srq-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0 0.65rem; border-bottom: 1px solid var(--color-border, #2a2c33); position: sticky; top: 0; z-index: 2; background: var(--color-bg, #14151a); }
 .srq-title { font-size: 0.95rem; margin: 0; }
 .srq-badge { background: var(--color-accent, #8ab4f8); color: var(--color-on-accent, #10121a); font-size: 0.72rem; font-weight: 700; border-radius: 999px; min-width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.3rem; }
@@ -80,7 +93,7 @@
 .srq-row-host { color: var(--color-text-muted, #9aa0aa); font-size: 0.68rem; margin-left: 0.4rem; }
 .srq-kind { font-size: 0.64rem; padding: 0 5px; border-radius: 3px; background: var(--color-border, #2a2c33); color: var(--color-text-muted, #cfd3da); margin-left: 0.4rem; }
 .srq-row-name { color: var(--color-text-muted, #cfd3da); font-size: 0.72rem; margin-left: 0.4rem; }
-.srq-row-snippet { margin: 0.2rem 0 0; font-size: 0.72rem; color: var(--color-text-muted, #b7bcc5); line-height: 1.35; }
+.srq-row-snippet { margin: 0.2rem 0 0; font-size: 0.72rem; color: var(--color-text-muted, #b7bcc5); line-height: 1.35; overflow-wrap: anywhere; }
 .srq-add { flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 5px; border: 1px solid var(--color-border, #2a2c33); background: var(--color-surface, #1c1e25); color: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; }
 .srq-add:hover:not(:disabled) { background: var(--color-border, #2a2c33); }
 .srq-add.added { border-color: var(--color-ok-text, #6ee7a8); color: var(--color-ok-text, #6ee7a8); cursor: default; }

shell/src/App.svelte

@@ -242,8 +242,9 @@
     const peekEach = neighbourCount ? Math.max(MIN_PEEK, remainder / neighbourCount) : 0;
 
     const slotKey = (s: Slot): string => (s.kind === 'remote' ? s.remote.id : s.composite.id);
+    // Hover-expand never applies mid-resize — the drag owns the geometry.
     const isHovered = (s: Slot): boolean =>
-      hoveredNeighborId !== null && slotKey(s) === hoveredNeighborId;
+      !resizing && hoveredNeighborId !== null && slotKey(s) === hoveredNeighborId;
     const widthOf = (s: Slot): number => (isHovered(s) ? HOVER_PCT : peekEach);
 
     const items: StageItem[] = [];
@@ -282,16 +283,27 @@
   }
 
   // ---- focused-panel edge resize (peek-flow) ------------------------------
-  function startResize(e: PointerEvent): void {
+  // The dragged edge's stage-relative position maps to the focused width
+  // according to which neighbours share the leftover: centred between two
+  // peeks → symmetric doubling; anchored at a stage edge (first/last step)
+  // → the edge position IS the width. The old centre-only math jumped on
+  // grab and tracked 2× at the rotation's ends. Pointer capture keeps the
+  // drag from feeding the peek overlays' hover-expand, which used to fight
+  // the resize mid-drag.
+  function startResize(e: PointerEvent, side: 'left' | 'right'): void {
     e.preventDefault();
     resizing = true;
+    hoveredNeighborId = null;
+    (e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId);
+    const i = layout.focusIndex;
+    const hasPrev = i > 0;
+    const hasNext = i < activeFlow.rotation.length - 1;
     const onMove = (ev: PointerEvent) => {
       if (!stageEl) return;
       const rect = stageEl.getBoundingClientRect();
-      // distance of the cursor from the stage centre, doubled, is the
-      // focused panel's width as a fraction of the stage.
-      const centre = rect.left + rect.width / 2;
-      const pct = (Math.abs(ev.clientX - centre) * 2) / rect.width * 100;
+      const p = ((ev.clientX - rect.left) / rect.width) * 100;
+      const pct =
+        hasPrev && hasNext ? Math.abs(p - 50) * 2 : side === 'right' ? p : 100 - p;
       layout.setFocusedWidth(pct);
     };
     const onUp = () => {
@@ -657,13 +669,19 @@
 
       {#if item.role === 'focused'}
         <!-- focused-panel resize edges — distinct pixels from the peek
-             overlays, so a resize-drag never fires a focus-commit. -->
-        <div class="resize-edge resize-edge-left"
-          onpointerdown={startResize}
-          role="separator" aria-label="Resize focused panel" tabindex="-1"></div>
-        <div class="resize-edge resize-edge-right"
-          onpointerdown={startResize}
-          role="separator" aria-label="Resize focused panel" tabindex="-1"></div>
+             overlays, so a resize-drag never fires a focus-commit. Only
+             sides that actually border a peek get one; the first/last
+             step's outer edge is the stage boundary, not a divider. -->
+        {#if layout.focusIndex > 0}
+          <div class="resize-edge resize-edge-left"
+            onpointerdown={(e) => startResize(e, 'left')}
+            role="separator" aria-label="Resize focused panel" tabindex="-1"></div>
+        {/if}
+        {#if layout.focusIndex < activeFlow.rotation.length - 1}
+          <div class="resize-edge resize-edge-right"
+            onpointerdown={(e) => startResize(e, 'right')}
+            role="separator" aria-label="Resize focused panel" tabindex="-1"></div>
+        {/if}
       {/if}
     </section>
   {/each}