(docs) improve the style when dragging jcubic#438

Author: jcubic

docs/src/components/ScreenShotBox/index.tsx

@@ -22,7 +22,7 @@ const example_code = `(define re #/<h1>([^>]+)<\\/h1>/)
     (loop (- i 1))))
 `;
 
-const WIDTH_MIN = 50;
+const WIDTH_MIN = 200;
 
 export default function ScreenShotBox(): JSX.Element {
     const dragging = useRef<boolean>(false);
@@ -48,10 +48,12 @@ export default function ScreenShotBox(): JSX.Element {
                     width = WIDTH_MIN + 1;
                 }
                 boxRef.current.style.setProperty('--width', `${width}px`);
+                document.body.classList.add('dragging');
             }
         }
         function mouseUp() {
             dragging.current = false;
+            document.body.classList.remove('dragging');
         }
         document.addEventListener('mousemove', mouseMove);
         document.addEventListener('mouseup', mouseUp);

docs/src/components/ScreenShotBox/style.css

@@ -45,12 +45,17 @@
 .resizable {
     display: flex;
 }
+
+
 .resizable .resizer {
     width: 5px;
     cursor: ew-resize;
     border-radius: 0 var(--radius) var(--radius) 0;
 }
-.resizable .resizer:hover {
+body.dragging:has(.resizable) * {
+    cursor: ew-resize;
+}
+.resizable .resizer:hover, body.dragging .resizable .resizer {
     background: #bd6b18;
 }
 .position, .cm-shadow-box, .wrapper {
@@ -69,9 +74,12 @@
     z-index: 100;
     overflow: hidden;
 }
-.cm-dialog:has(+.resizer:hover) {
+.cm-dialog:has(+.resizer:hover), body.dragging .cm-dialog {
     border-radius: var(--radius) 0 0 var(--radius);
 }
+.cm-dialog:has(+.resizer:hover) *, body.dragging .cm-dialog * {
+    user-select: none;
+}
 .cm-dialog header {
     padding: 10px;
 }