From eda781ad37fa0ae1ba2cd6013abac2f6441ce6b7 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Wed, 8 Oct 2025 17:48:26 -0700
Subject: [PATCH] Style: Fix move cursors that should be grabs (#5989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Align with designs that use `grab`/`grabbing` instead of `move`.

## Review Focus

Additionally
- Fixes the use of `@apply` in the places I touched
- Removed some `style.css` rules that were always overridden by the
component

## Screenshots

### Before


https://github.com/user-attachments/assets/9ca65b92-33e5-4feb-853c-9c5ece574ab5


### After


https://github.com/user-attachments/assets/51569025-0156-473e-be93-5662c345901b



┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5989-Style-Fix-move-cursors-that-should-be-grabs-2876d73d3650813bbe95c761c5d46e03)
by [Unito](https://www.unito.io)
---
 packages/design-system/src/css/style.css          |  3 ---
 src/components/actionbar/ComfyActionbar.vue       | 15 ++++++++++-----
 .../graph/selectionToolbox/ExecuteButton.vue      |  8 +-------
 .../extensions/vueNodes/components/NodeHeader.vue |  2 +-
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index af18f4e3e..2a714ce7a 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -645,13 +645,10 @@ button.comfy-close-menu-btn {
 }
 
 span.drag-handle {
-  width: 10px;
-  height: 20px;
   display: inline-block;
   overflow: hidden;
   line-height: 5px;
   padding: 3px 4px;
-  cursor: move;
   vertical-align: middle;
   margin-top: -0.4em;
   margin-left: -0.2em;
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index e05a10619..6844f9a36 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -5,7 +5,15 @@
     :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
   >
     <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
+      <span
+        ref="dragHandleRef"
+        :class="
+          cn(
+            'drag-handle cursor-grab w-3 h-max mr-2',
+            isDragging && 'cursor-grabbing'
+          )
+        "
+      />
       <ComfyQueueButton />
     </div>
   </Panel>
@@ -26,6 +34,7 @@ import type { Ref } from 'vue'
 import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -257,8 +266,4 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
 :deep(.p-panel-header) {
   display: none;
 }
-
-.drag-handle {
-  @apply w-3 h-max;
-}
 </style>
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index 0f84fc041..90cfbaa16 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -10,7 +10,7 @@
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i class="icon-[lucide--play] fill-path-white w-4 h-4" />
+    <i class="icon-[lucide--play] text-white size-4" />
   </Button>
 </template>
 
@@ -64,9 +64,3 @@ const handleClick = async () => {
   await commandStore.execute('Comfy.QueueSelectedOutputNodes')
 }
 </script>
-<style scoped>
-:deep.fill-path-white > path {
-  fill: white;
-  stroke: unset;
-}
-</style>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 5f0cc03ab..f242733e8 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -6,7 +6,7 @@
     v-else
     :class="
       cn(
-        'lg-node-header p-4 rounded-t-2xl cursor-move w-full bg-node-component-header-surface text-node-component-header',
+        'lg-node-header p-4 rounded-t-2xl w-full bg-node-component-header-surface text-node-component-header',
         collapsed && 'rounded-2xl'
       )
     "