feat: v4.7.0 - resize handle cursor col-resize (explicit div, z-index), grabbing cursor during drag

app/config.py

@@ -1,5 +1,5 @@
 """Application configuration."""
 
-VERSION = "4.6.0"
+VERSION = "4.7.0"
 MAX_FILE_SIZE_MB = 10
 DEFAULT_COLOR = "#ffffff"

app/static/css/app.css

@@ -872,23 +872,22 @@ body {
     line-height: 1.2;
 }
 
-/* Resize handle on right edge */
+/* Resize handle on right edge — explicit element, always correct cursor */
-.block-el::after {
+.block-resize-handle {
-    content: '';
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
-    width: 6px;
+    width: 8px;
-    cursor: ew-resize;
+    cursor: col-resize;
-    background: rgba(255,255,255,0.2);
+    z-index: 5;
     border-radius: 0 4px 4px 0;
-    opacity: 0;
+    background: transparent;
-    transition: opacity 0.12s;
+    transition: background 0.12s;
 }
 
-.block-el:hover::after {
+.block-el:hover .block-resize-handle {
-    opacity: 1;
+    background: rgba(255,255,255,0.25);
 }
 
 /* Duration row (hours + minutes) */

app/static/index.html

@@ -13,7 +13,7 @@
     <header class="header">
         <div class="header-left">
             <h1 class="header-title">Scénář Creator</h1>
-            <span class="header-version">v4.6</span>
+            <span class="header-version">v4.7</span>
         </div>
         <div class="header-actions">
             <label class="btn btn-secondary btn-sm" id="importJsonBtn">

app/static/js/canvas.js

@@ -260,17 +260,20 @@ const Canvas = {
                    (block.responsible ? ` · ${block.responsible}` : '');
         el.appendChild(inner);
 
+        // Resize handle — explicit element so cursor is always correct
+        const resizeHandle = document.createElement('div');
+        resizeHandle.className = 'block-resize-handle';
+        el.appendChild(resizeHandle);
+
         // Click to edit
         el.addEventListener('click', (e) => {
             e.stopPropagation();
             App.openBlockModal(block.id);
         });
 
-        // Native pointer drag — ghost on document.body, avoids overflow/clipping issues
+        // Native pointer drag — skip if clicking the resize handle (interact.js owns that)
         el.addEventListener('pointerdown', (e) => {
-            const elRect = el.getBoundingClientRect();
+            if (e.target.closest('.block-resize-handle')) return;
-            if (e.clientX > elRect.right - 8) return; // right 8px = resize handle
-            e.preventDefault();
             e.stopPropagation();
             this._startPointerDrag(e, el, block);
         });
@@ -320,8 +323,9 @@ const Canvas = {
         // Release implicit pointer capture so pointermove fires freely on document
         try { el.releasePointerCapture(e.pointerId); } catch (_) {}
 
-        // Prevent text selection during drag
+        // Prevent text selection + set grabbing cursor during drag
         document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'grabbing';
 
         // ── Ghost element ─────────────────────────────────────────────
         const ghost = document.createElement('div');
@@ -379,6 +383,7 @@ const Canvas = {
             el.style.opacity = '';
             clearHighlights();
             document.body.style.userSelect = '';
+            document.body.style.cursor = '';
 
             const dx = ev.clientX - startX;
             const dy = ev.clientY - startY;