Fix pattern dragging and vertical scrolling

app/globals.css

@@ -76,7 +76,7 @@ input[type="range"] { accent-color: var(--green); }
 .zoom-control button { width: 36px; height: 36px; border: 1px solid var(--line); background: white; cursor: pointer; font-size: 20px; }
 .zoom-control input { width: 95px; }
 .zoom-control output { width: 38px; color: var(--muted); font-size: 11px; text-align: right; }
-.canvas-stage { min-height: 610px; flex: 1; overflow: auto; display: block; padding: 36px; cursor: grab; touch-action: none; overscroll-behavior: contain; user-select: none; }
+.canvas-stage { width: 100%; height: clamp(520px, 68vh, 760px); min-height: 0; flex: none; overflow: auto; display: block; padding: 36px; cursor: grab; touch-action: none; overscroll-behavior: contain; user-select: none; scrollbar-gutter: stable; }
 .canvas-stage.is-dragging { cursor: grabbing; }
 .canvas-wrap { width: max-content; line-height: 0; position: relative; margin: auto; border: 1px solid var(--ink); box-shadow: 10px 10px 0 rgba(32,39,36,.13); background: white; }
 .canvas-wrap canvas { cursor: inherit; image-rendering: pixelated; }
@@ -160,7 +160,7 @@ input[type="range"] { accent-color: var(--green); }
   .pattern-toolbar { align-items: flex-start; flex-direction: column; padding: 20px; }
   .zoom-control { width: 100%; }
   .zoom-control input { flex: 1; }
-  .canvas-stage { min-height: 440px; display: block; padding: 24px; }
+  .canvas-stage { height: min(68vh, 620px); min-height: 360px; display: block; padding: 24px; }
   .canvas-wrap { margin: auto; }
   .pattern-footer { align-items: flex-start; flex-wrap: wrap; padding: 14px 18px; }
   .view-options { width: 100%; margin: 5px 0 0; justify-content: space-between; }

app/page.tsx

@@ -611,7 +611,8 @@ export default function Home() {
     if (event.button !== 0) return;
     const stage = patternStageRef.current;
     if (!stage) return;
-    stage.setPointerCapture(event.pointerId);
+    suppressCanvasClickRef.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
     patternDragRef.current = {
       pointerId: event.pointerId,
       x: event.clientX,
@@ -643,7 +644,23 @@ export default function Home() {
     suppressCanvasClickRef.current = drag.moved;
     patternDragRef.current = null;
     stage?.classList.remove("is-dragging");
-    if (stage?.hasPointerCapture(event.pointerId)) stage.releasePointerCapture(event.pointerId);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+
+  const handlePatternPointerCancel = (event: React.PointerEvent<HTMLCanvasElement>) => {
+    const drag = patternDragRef.current;
+    if (drag?.pointerId !== event.pointerId) return;
+    patternDragRef.current = null;
+    suppressCanvasClickRef.current = false;
+    patternStageRef.current?.classList.remove("is-dragging");
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+
+  const handlePatternLostPointerCapture = (event: React.PointerEvent<HTMLCanvasElement>) => {
+    if (patternDragRef.current?.pointerId !== event.pointerId) return;
+    patternDragRef.current = null;
+    suppressCanvasClickRef.current = false;
+    patternStageRef.current?.classList.remove("is-dragging");
   };
 
   const handleCanvasClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
@@ -662,6 +679,10 @@ export default function Home() {
   };
 
   const handleCanvasMove = (event: React.MouseEvent<HTMLCanvasElement>) => {
+    if (patternDragRef.current?.moved) {
+      setHoveredPixel(null);
+      return;
+    }
     const canvas = canvasRef.current;
     if (!canvas) return;
     const rect = canvas.getBoundingClientRect();
@@ -798,7 +819,9 @@ export default function Home() {
                 onPointerDown={handlePatternPointerDown}
                 onPointerMove={handlePatternPointerMove}
                 onPointerUp={handlePatternPointerUp}
-                onPointerCancel={handlePatternPointerUp}
+                onPointerCancel={handlePatternPointerCancel}
+                onLostPointerCapture={handlePatternLostPointerCapture}
+                onContextMenu={(event) => event.preventDefault()}
                 onClick={handleCanvasClick}
                 onMouseMove={handleCanvasMove}
                 onMouseLeave={() => setHoveredPixel(null)}