big cmap refactoring

static/cmap/cmap.css

@@ -362,11 +362,12 @@ body.cmap-mode #main {
   --cmap-a4-width: 1123px;
   --cmap-a4-height: 794px;
   position: relative;
-  flex: 1 0 auto;
+  z-index: 1;
+  flex: 1 1 0;
   width: max-content;
   min-width: max(760px, calc(100% - 90px));
   min-height: 794px;
-  overflow: visible;
+  overflow: auto;
   border: 0;
   background-color: #fff;
   background-image:
@@ -376,6 +377,12 @@ body.cmap-mode #main {
   box-shadow: inset 1px 1px #d9dde2;
 }
 
+/* Keep the editor viewport bounded so vertical canvas scrolling is available. */
+.cmap-workspace > .cmap-canvas {
+  height: calc(100vh - 180px);
+  min-height: 0;
+}
+
 .cmap-canvas.cmap-page-guides-hidden {
   background-image: none;
   box-shadow: none;
@@ -388,6 +395,15 @@ body.cmap-mode #main {
   transform-origin: 0 0;
 }
 
+.cmap-canvas:has(.rw-cmap-surface) {
+  cursor: grab;
+}
+
+.cmap-canvas.rw-cmap-canvas-panning {
+  cursor: grabbing;
+  user-select: none;
+}
+
 .rw-cmap-embed {
   display: block;
   margin: 1.25rem 0;
@@ -773,7 +789,7 @@ body.cmap-mode #main {
   );
   box-shadow: 0 1px 3px rgb(35 55 30 / 18%);
   cursor: move;
-  pointer-events: auto;
+  pointer-events: none;
   user-select: none;
 }
 
@@ -822,6 +838,33 @@ body.cmap-mode #main {
   pointer-events: auto;
 }
 
+.rw-cmap-submap-frame-drag-edge {
+  position: absolute;
+  z-index: 2;
+  cursor: move;
+  pointer-events: auto;
+}
+
+.rw-cmap-submap-frame-drag-edge-top,
+.rw-cmap-submap-frame-drag-edge-bottom {
+  right: 0;
+  left: 0;
+  height: 10px;
+}
+
+.rw-cmap-submap-frame-drag-edge-top { top: 0; }
+.rw-cmap-submap-frame-drag-edge-bottom { bottom: 0; }
+
+.rw-cmap-submap-frame-drag-edge-right,
+.rw-cmap-submap-frame-drag-edge-left {
+  top: 0;
+  bottom: 0;
+  width: 10px;
+}
+
+.rw-cmap-submap-frame-drag-edge-right { right: 0; }
+.rw-cmap-submap-frame-drag-edge-left { left: 0; }
+
 .rw-cmap-boundary-layer,
 .rw-cmap-boundary-lines {
   position: absolute;