Tiles resize from anywhere, so nothing marks the spots

Every edge and both bottom corners resize now, so the little marks that used
to appear on hover were pointing at the whole rim. They are gone — corners,
edges and the seam pill alike — and the cursor over an edge is what says it
can be dragged, the way a window's own edges do it. The seam still shows
itself while it is actually being dragged, which says what is moving rather
than where you may push.

With nothing drawn, the grips could be made to cover the rim properly: the
top strip now runs corner to corner instead of stopping 24px short, the
sides run from it down to the bottom corners, and the bottom strip fills
between those. No dead spots left along an edge.

The side grips also stopped standing down at a seam. They only did so to
avoid stacking three marks in one place, and it cost real ground: a tile
taller than its neighbour lost its whole side, not just the part the seam
covers. The seam sits above them anyway, so it still wins where it exists
and the rest of the edge now works.

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

public/shell.js

@@ -353,31 +353,23 @@ function buildTile(tile) {
   const body = document.createElement('div');
   body.className = 'tile-body';
 
-  const resize = document.createElement('div');
-  resize.className = 'tile-resize';
-  resize.title = 'Drag to resize';
-
-  const resizeLeft = document.createElement('div');
-  resizeLeft.className = 'tile-resize-left';
-  resizeLeft.title = 'Drag to resize';
-
-  // pill on the bottom edge: moves that edge (trading rows with tiles below)
-  const resizeBottom = document.createElement('div');
-  resizeBottom.className = 'tile-resize-bottom';
-  resizeBottom.title = 'Drag to adjust height';
-
-  // The other three edges move only themselves: the top edge changes where
-  // the tile starts, the sides change how wide it is. Each stops where a
-  // neighbour or the tile's own minimum says it must.
-  const edgeGrip = (cls, title) => {
+  /* The rim: both bottom corners resize in two directions, the bottom edge
+     moves that edge (trading rows with tiles below), and the other three
+     move only themselves — the top edge changes where the tile starts, the
+     sides how wide it is — each stopping where a neighbour or the tile's own
+     minimum says it must. None of them draw anything: the cursor over an
+     edge is what says it can be dragged, as on a window. */
+  const grip = (cls) => {
     const gripEl = document.createElement('div');
     gripEl.className = cls;
-    gripEl.title = title;
     return gripEl;
   };
-  const edgeTop = edgeGrip('tile-resize-top', 'Drag to adjust height');
-  const edgeRight = edgeGrip('tile-resize-right', 'Drag to adjust width');
-  const edgeLeft = edgeGrip('tile-resize-side', 'Drag to adjust width');
+  const resize = grip('tile-resize');
+  const resizeLeft = grip('tile-resize-left');
+  const resizeBottom = grip('tile-resize-bottom');
+  const edgeTop = grip('tile-resize-top');
+  const edgeRight = grip('tile-resize-right');
+  const edgeLeft = grip('tile-resize-side');
 
   // notch on the title bar's bottom edge: hides/shows the bar
   const notch = document.createElement('button');
@@ -752,29 +744,6 @@ function rebuildDividers() {
       buildDivider(L, R, top, bottom);
     }
   }
-  markSeamSides();
-}
-
-/* Where two tiles meet, the seam pill between them already owns that
-   boundary — and it is the better tool there, since it moves both edges at
-   once and leaves no gap. A side grip on the same pixels would be a second
-   control doing something else, so it steps aside and the tile is resized
-   from that side by the pill. Free sides keep their grip. */
-function markSeamSides() {
-  const rowsOverlap = (a, b) => Math.min(a.y + a.h, b.y + b.h) > Math.max(a.y, b.y);
-  for (const t of tiles) {
-    const el = tileEls.get(t.id)?.el;
-    if (!el) continue;
-    let left = false;
-    let right = false;
-    for (const o of tiles) {
-      if (o === t || !rowsOverlap(o, t)) continue;
-      if (o.x + o.w === t.x) left = true;
-      if (o.x === t.x + t.w) right = true;
-    }
-    el.classList.toggle('seam-left', left);
-    el.classList.toggle('seam-right', right);
-  }
 }
 
 /** Every pair of tiles that meets at this column boundary, in any row. */
@@ -794,7 +763,6 @@ function seamPairsAt(boundary) {
 function buildDivider(L, R, top, bottom) {
   const el = document.createElement('div');
   el.className = 'tile-divider';
-  el.title = 'Drag to resize this column';
 
   const place = () => {
     const m = cellMetrics();
@@ -807,14 +775,6 @@ function buildDivider(L, R, top, bottom) {
 
   const boundary = () => L.x + L.w;
   const groupEls = () => dividers.filter((d) => d.boundary() === boundary()).map((d) => d.el);
-  const unlink = () => { for (const d of dividers) d.el.classList.remove('linked'); };
-
-  // Before anything is dragged, show which seams travel with this one.
-  el.addEventListener('pointerenter', () => {
-    if (document.body.classList.contains('fullscreen')) return;
-    for (const other of groupEls()) other.classList.add('linked');
-  });
-  el.addEventListener('pointerleave', unlink);
 
   el.addEventListener('pointerdown', (ev) => {
     if (ev.button !== 0 && ev.pointerType === 'mouse') return;
@@ -870,7 +830,6 @@ function buildDivider(L, R, top, bottom) {
       el.removeEventListener('pointerup', onUp);
       el.removeEventListener('pointercancel', onUp);
       for (const other of group) other.classList.remove('active');
-      unlink();
       if (changed) saveLayout();
       rebuildDividers(); // adjacencies may have changed
     };