From 5d712494a53208ba5d1a2aeb9e257d794cd7f1a5 Mon Sep 17 00:00:00 2001
From: Daneel <daneel@sukany.cz>
Date: Fri, 20 Feb 2026 19:21:55 +0100
Subject: [PATCH] feat: v4.7.0 - resize handle cursor col-resize (explicit div,
 z-index), grabbing cursor during drag

---
 app/config.py           |  2 +-
 app/static/css/app.css  | 19 +++++++++----------
 app/static/index.html   |  2 +-
 app/static/js/canvas.js | 15 ++++++++++-----
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/config.py b/app/config.py
index cb91ac3..3397773 100644
--- a/app/config.py
+++ b/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"
diff --git a/app/static/css/app.css b/app/static/css/app.css
index a43cee6..1fefa89 100644
--- a/app/static/css/app.css
+++ b/app/static/css/app.css
@@ -872,23 +872,22 @@ body {
     line-height: 1.2;
 }
 
-/* Resize handle on right edge */
-.block-el::after {
-    content: '';
+/* Resize handle on right edge — explicit element, always correct cursor */
+.block-resize-handle {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
-    width: 6px;
-    cursor: ew-resize;
-    background: rgba(255,255,255,0.2);
+    width: 8px;
+    cursor: col-resize;
+    z-index: 5;
     border-radius: 0 4px 4px 0;
-    opacity: 0;
-    transition: opacity 0.12s;
+    background: transparent;
+    transition: background 0.12s;
 }
 
-.block-el:hover::after {
-    opacity: 1;
+.block-el:hover .block-resize-handle {
+    background: rgba(255,255,255,0.25);
 }
 
 /* Duration row (hours + minutes) */
diff --git a/app/static/index.html b/app/static/index.html
index 2a87fc5..8b133d5 100644
--- a/app/static/index.html
+++ b/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">
diff --git a/app/static/js/canvas.js b/app/static/js/canvas.js
index 8d8377e..61efeaa 100644
--- a/app/static/js/canvas.js
+++ b/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.clientX > elRect.right - 8) return; // right 8px = resize handle
-            e.preventDefault();
+            if (e.target.closest('.block-resize-handle')) return;
             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;