From b5beace33414762a6710c5bde87508ff3d171bcc Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Thu, 28 May 2026 15:12:00 +0200
Subject: [PATCH] Update drag handling: use topbar for dragging, add cursor
 styles, and exclude certain elements from drag initiation

---
 web/css/linker-main.css  |  1 +
 web/css/linker-shell.css | 10 ++++++++++
 web/linker.js            | 29 +++++++++++++++++++++++------
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/web/css/linker-main.css b/web/css/linker-main.css
index c816bc1..9388be4 100644
--- a/web/css/linker-main.css
+++ b/web/css/linker-main.css
@@ -2029,6 +2029,7 @@
     --ml-tab-corner-size: 15px;
     --ml-tab-hover-bg: rgba(255,255,255,0.075);
     --ml-tab-separator: rgba(255,255,255,0.125);
+    cursor: default;
 }
 .ml-tab {
     display: inline-flex;
diff --git a/web/css/linker-shell.css b/web/css/linker-shell.css
index 391dfaa..625a19a 100644
--- a/web/css/linker-shell.css
+++ b/web/css/linker-shell.css
@@ -60,6 +60,12 @@
     padding: 6px 10px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.38);
     background: #1f1f1f;
+    cursor: grab;
+    user-select: none;
+}
+
+.ml-dialog-topbar.ml-is-dragging {
+    cursor: grabbing;
 }
 
 .ml-dialog-brand,
@@ -101,6 +107,10 @@
     box-sizing: border-box;
 }
 
+.ml-dialog-topbar.ml-is-dragging #model-linker-drag-handle {
+    cursor: grabbing;
+}
+
 #model-linker-modal .ml-window-btn {
     display: flex;
     align-items: center;
diff --git a/web/linker.js b/web/linker.js
index 2db9b6d..7e2c6a1 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -3803,25 +3803,42 @@ class LinkerManagerDialog extends ComfyDialog {
         }
     }
     
-    // Attach drag handle event listeners
+    // Attach topbar drag listeners while preserving the handle-based viewport clamp.
     attachDragHandleIfNeeded() {
         if (this._dragHandleAttached) return;
         
         const handle = document.getElementById('model-linker-drag-handle');
-        if (!handle) return;
+        const topbar = this.element?.querySelector('.ml-dialog-topbar');
+        if (!handle || !topbar) return;
         
         const onMouseDown = (e) => {
             if (this.fullscreen) return; // no drag in fullscreen
-            handle.style.cursor = 'grabbing';
+            if (e.button !== 0 || this.isTopbarDragExcluded(e.target)) return;
+            topbar.classList.add('ml-is-dragging');
             this.startDrag(e);
         };
-        const onMouseUp = () => { handle.style.cursor = 'grab'; };
+        const onMouseUp = () => { topbar.classList.remove('ml-is-dragging'); };
         
-        handle.addEventListener('mousedown', onMouseDown);
-        document.addEventListener('mouseup', onMouseUp, { once: true });
+        topbar.addEventListener('mousedown', onMouseDown);
+        document.addEventListener('mouseup', onMouseUp);
         
         this._dragHandleAttached = true;
     }
+
+    isTopbarDragExcluded(target) {
+        if (!(target instanceof Element)) return false;
+        return !!target.closest([
+            '.ml-tabs',
+            '.ml-dialog-controls',
+            'button',
+            'a',
+            'input',
+            'select',
+            'textarea',
+            '[role="button"]',
+            '[data-ml-no-drag]'
+        ].join(','));
+    }
     
     close() {
         this._hidePreview?.();