Isolate pattern viewport scrolling

app/globals.css

@@ -76,7 +76,8 @@ 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 { 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-viewport { position: relative; width: 100%; height: clamp(520px, 68vh, 760px); min-height: 0; flex: 0 0 clamp(520px, 68vh, 760px); contain: size layout; overflow: hidden; }
+.canvas-stage { position: absolute; inset: 0; width: auto; height: auto; overflow: scroll; 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 +161,8 @@ 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 { height: min(68vh, 620px); min-height: 360px; display: block; padding: 24px; }
+  .canvas-viewport { height: max(360px, min(68vh, 620px)); min-height: 0; flex-basis: max(360px, min(68vh, 620px)); }
+  .canvas-stage { 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

@@ -809,29 +809,31 @@ export default function Home() {
             </div>
           </div>
 
-          <div
-            className="canvas-stage"
-            ref={patternStageRef}
-          >
-            <div className="canvas-wrap">
-              <canvas
-                ref={canvasRef}
-                onPointerDown={handlePatternPointerDown}
-                onPointerMove={handlePatternPointerMove}
-                onPointerUp={handlePatternPointerUp}
-                onPointerCancel={handlePatternPointerCancel}
-                onLostPointerCapture={handlePatternLostPointerCapture}
-                onContextMenu={(event) => event.preventDefault()}
-                onClick={handleCanvasClick}
-                onMouseMove={handleCanvasMove}
-                onMouseLeave={() => setHoveredPixel(null)}
-                aria-label="转换后的拼豆像素图，可拖动查看，轻点格子选择颜色"
-              />
-              {hoveredPixel && <div className="pixel-tooltip" style={{ left: hoveredPixel.left, top: hoveredPixel.top }}>
-                <span className="tooltip-swatch" style={{ backgroundColor: hoveredPixel.color.hex }} />
-                <strong>第 {hoveredPixel.row} 行 · 第 {hoveredPixel.column} 列</strong>
-                <small>{hoveredPixel.color.code} · {hoveredPixel.color.name} · {hoveredPixel.color.hex}</small>
-              </div>}
+          <div className="canvas-viewport">
+            <div
+              className="canvas-stage"
+              ref={patternStageRef}
+            >
+              <div className="canvas-wrap">
+                <canvas
+                  ref={canvasRef}
+                  onPointerDown={handlePatternPointerDown}
+                  onPointerMove={handlePatternPointerMove}
+                  onPointerUp={handlePatternPointerUp}
+                  onPointerCancel={handlePatternPointerCancel}
+                  onLostPointerCapture={handlePatternLostPointerCapture}
+                  onContextMenu={(event) => event.preventDefault()}
+                  onClick={handleCanvasClick}
+                  onMouseMove={handleCanvasMove}
+                  onMouseLeave={() => setHoveredPixel(null)}
+                  aria-label="转换后的拼豆像素图，可拖动查看，轻点格子选择颜色"
+                />
+                {hoveredPixel && <div className="pixel-tooltip" style={{ left: hoveredPixel.left, top: hoveredPixel.top }}>
+                  <span className="tooltip-swatch" style={{ backgroundColor: hoveredPixel.color.hex }} />
+                  <strong>第 {hoveredPixel.row} 行 · 第 {hoveredPixel.column} 列</strong>
+                  <small>{hoveredPixel.color.code} · {hoveredPixel.color.name} · {hoveredPixel.color.hex}</small>
+                </div>}
+              </div>
             </div>
           </div>