From f3478a189a0932c2b2bfa30c19019c07f6f03742 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 17 Jul 2025 13:13:31 +1000
Subject: [PATCH] fix(ui): able to drag empty space in tab bar and detach
 panels

---
 .../ui/layouts/use-hack-out-dv-tab-draggable.ts      | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts b/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts
index 9ea164f0c6..ce78faa6ad 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts
+++ b/invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts
@@ -6,6 +6,8 @@ import { useEffect } from 'react';
  *
  * Dockview always sets the draggable flag on its tab elements, even when dnd is disabled. This hook traverses
  * up from the provided ref to find the closest tab element and sets its `draggable` attribute to `false`.
+ *
+ * TODO: Remove this when https://github.com/mathuo/dockview/pull/961 is shipped.
  */
 export const useHackOutDvTabDraggable = (ref: RefObject<HTMLElement>) => {
   useEffect(() => {
@@ -18,5 +20,15 @@ export const useHackOutDvTabDraggable = (ref: RefObject<HTMLElement>) => {
       return;
     }
     parentTab.setAttribute('draggable', 'false');
+
+    const tabContainer = parentTab.closest('.dv-tabs-and-actions-container');
+    if (!tabContainer) {
+      return;
+    }
+    const voidContainer = tabContainer.querySelector('.dv-void-container');
+    if (!voidContainer) {
+      return;
+    }
+    voidContainer.setAttribute('draggable', 'false');
   }, [ref]);
 };