From 2103dcc7880b18d955106c925fd1f38596d4aaef Mon Sep 17 00:00:00 2001 From: Christian Byrne Date: Wed, 28 Jan 2026 19:15:40 -0800 Subject: [PATCH] fix: increase Vue node resize handle size for better usability (#8391) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Increases the resize handle size on Vue nodes to improve usability, especially when nodes are selected. ## Changes - **What**: Increased resize handle from 12px to 20px and offset it slightly outside the node boundary to avoid overlap with selection outline ## Review Focus The resize handle was too small and became harder to grab when the node was selected (the 2px outline rendered outside the box, visually obscuring the corner). This fix increases the hit area and positions it to extend beyond the node edge. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8391-fix-increase-Vue-node-resize-handle-size-for-better-usability-2f76d73d36508136b2aac51bc0d53551) by [Unito](https://www.unito.io) --------- Co-authored-by: Subagent 5 Co-authored-by: Amp Co-authored-by: GitHub Action --- src/renderer/extensions/vueNodes/components/LGraphNode.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index d602e4062..838e20dd0 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -150,7 +150,9 @@ v-if="!isCollapsed && nodeData.resizable !== false" role="button" :aria-label="t('g.resizeFromBottomRight')" - :class="cn(baseResizeHandleClasses, 'right-0 bottom-0 cursor-se-resize')" + :class=" + cn(baseResizeHandleClasses, '-right-1 -bottom-1 cursor-se-resize') + " @pointerdown.stop="handleResizePointerDown" /> @@ -344,7 +346,7 @@ function initSizeStyles() { } const baseResizeHandleClasses = - 'absolute h-3 w-3 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40' + 'absolute h-5 w-5 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40' const MIN_NODE_WIDTH = 225