From 2f00893b27cc2f5d61792f3a8ca846cfbd1aa7e8 Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Wed, 22 Oct 2025 14:05:53 -0700
Subject: [PATCH] Expand drop zone for docking run button (#6193)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Expand the drop zone for docking the run button to be a bit more
forgiving.
<img width="494" height="99" alt="image"
src="https://github.com/user-attachments/assets/97eb6948-211d-4ed6-b06c-d6fb57b45f0b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6193-Expand-drop-zone-for-docking-run-button-2946d73d3650816d996fdc57022161db)
by [Unito](https://www.unito.io)
---
 browser_tests/helpers/actionbar.ts          |  2 +-
 src/components/actionbar/ComfyActionbar.vue | 77 ++++++---------------
 2 files changed, 24 insertions(+), 55 deletions(-)

diff --git a/browser_tests/helpers/actionbar.ts b/browser_tests/helpers/actionbar.ts
index f37de855a..89d5e73ad 100644
--- a/browser_tests/helpers/actionbar.ts
+++ b/browser_tests/helpers/actionbar.ts
@@ -13,7 +13,7 @@ export class ComfyActionbar {
 
   async isDocked() {
     const className = await this.root.getAttribute('class')
-    return className?.includes('is-docked') ?? false
+    return className?.includes('static') ?? false
   }
 }
 
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index c2b7fe8ed..f01beee25 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -2,10 +2,7 @@
   <div class="flex h-full items-center">
     <div
       v-if="isDragging && !isDocked"
-      class="actionbar-drop-zone m-1.5 flex items-center justify-center self-stretch rounded-md"
-      :class="{
-        'drop-zone-active': isMouseOverDropZone
-      }"
+      :class="actionbarClass"
       @mouseenter="onMouseEnterDropZone"
       @mouseleave="onMouseLeaveDropZone"
     >
@@ -13,18 +10,15 @@
     </div>
 
     <Panel
-      class="actionbar"
+      class="pointer-events-auto z-1000"
       :style="style"
-      :class="{
-        fixed: !isDocked,
-        'is-dragging': isDragging,
-        'is-docked static mr-2 border-none bg-transparent p-0': isDocked
+      :class="panelClass"
+      :pt="{
+        header: { class: 'hidden' },
+        content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div
-        ref="panelRef"
-        class="actionbar-content flex items-center select-none"
-      >
+      <div ref="panelRef" class="flex items-center select-none">
         <span
           ref="dragHandleRef"
           :class="
@@ -251,45 +245,20 @@ watch(isDragging, (dragging) => {
     isMouseOverDropZone.value = false
   }
 })
+const actionbarClass = computed(() =>
+  cn(
+    'w-[265px] border-dashed border-blue-500 opacity-80',
+    'm-1.5 flex items-center justify-center self-stretch',
+    'rounded-md before:w-50 before:-ml-50 before:h-full',
+    isMouseOverDropZone.value &&
+      'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
+  )
+)
+const panelClass = computed(() =>
+  cn(
+    'actionbar pointer-events-auto z1000',
+    isDragging.value && 'select-none pointer-events-none',
+    isDocked.value ? 'p-0 static mr-2 border-none bg-transparent' : 'fixed'
+  )
+)
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.actionbar {
-  pointer-events: all;
-  z-index: 1000;
-}
-
-.actionbar-drop-zone {
-  width: 265px;
-  border: 2px dashed var(--p-primary-color);
-  opacity: 0.8;
-}
-
-.actionbar-drop-zone.drop-zone-active {
-  background: var(--p-highlight-background-focus);
-  border-color: var(--p-primary-color);
-  border-width: 3px;
-  box-shadow: 0 0 20px var(--p-primary-color);
-  opacity: 1;
-  transform: scale(1.05);
-}
-
-.actionbar.is-dragging {
-  user-select: none;
-  pointer-events: none;
-}
-
-:deep(.p-panel-content) {
-  @apply p-1;
-}
-
-.is-docked :deep(.p-panel-content) {
-  @apply p-0;
-}
-
-:deep(.p-panel-header) {
-  display: none;
-}
-</style>