From 247080f0d735fde749e71e367a47dc91953bdf85 Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Tue, 7 Oct 2025 15:04:27 -0700
Subject: [PATCH] fix: node header DOM hierarchy (#5961)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fix: node header DOM hierarchy to position tooltip over text and
constrain LOD fallback to text instead of full width. Keep node header
full width to accommodate for colored background.

## Screenshots (if applicable)

<img width="1418" height="933" alt="image"
src="https://github.com/user-attachments/assets/804116d1-2444-4891-a04f-a2dfe8d586ff"
/>
<img width="1420" height="930" alt="image"
src="https://github.com/user-attachments/assets/a884edd0-055b-4dc7-b44c-a88b8376e018"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5961-fix-node-header-DOM-hierarchy-2856d73d3650814eae04ef96fae062fe)
by [Unito](https://www.unito.io)
---
 .../vueNodes/components/NodeHeader.vue        | 79 ++++++++++---------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 5cdc94e8a..7b4332a8c 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -14,47 +14,51 @@
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
-    <div class="flex items-center justify-between gap-2.5 relative">
+    <div class="flex items-center justify-between gap-2.5">
       <!-- Collapse/Expand Button -->
-      <div class="flex items-center lod-toggle shrink-0 px-0.5">
-        <IconButton
-          size="fit-content"
-          type="transparent"
-          data-testid="node-collapse-button"
-          @click.stop="handleCollapse"
-          @dblclick.stop
+      <div class="relative flex items-center gap-2.5">
+        <div class="flex items-center lod-toggle shrink-0 px-0.5">
+          <IconButton
+            size="fit-content"
+            type="transparent"
+            data-testid="node-collapse-button"
+            @click.stop="handleCollapse"
+            @dblclick.stop
+          >
+            <i
+              :class="
+                cn(
+                  'icon-[lucide--chevron-down] size-5 transition-transform',
+                  collapsed && '-rotate-90'
+                )
+              "
+              class="text-xs leading-none relative top-px text-node-component-header-icon"
+            ></i>
+          </IconButton>
+        </div>
+
+        <!-- Node Title -->
+        <div
+          v-tooltip.top="tooltipConfig"
+          class="text-sm font-bold truncate flex-1 lod-toggle flex items-center gap-2"
+          data-testid="node-title"
         >
-          <i
-            :class="
-              cn(
-                'icon-[lucide--chevron-down] size-5 transition-transform',
-                collapsed && '-rotate-90'
-              )
-            "
-            class="text-xs leading-none relative top-px text-node-component-header-icon"
-          ></i>
-        </IconButton>
+          <EditableText
+            :model-value="displayTitle"
+            :is-editing="isEditing"
+            :input-attrs="{ 'data-testid': 'node-title-input' }"
+            @edit="handleTitleEdit"
+            @cancel="handleTitleCancel"
+          />
+          <i-lucide:pin
+            v-if="isPinned"
+            class="size-5 text-node-component-header-icon"
+            data-testid="node-pin-indicator"
+          />
+        </div>
+        <LODFallback />
       </div>
 
-      <!-- Node Title -->
-      <div
-        v-tooltip.top="tooltipConfig"
-        class="text-sm font-bold truncate flex-1 lod-toggle flex items-center gap-2"
-        data-testid="node-title"
-      >
-        <EditableText
-          :model-value="displayTitle"
-          :is-editing="isEditing"
-          :input-attrs="{ 'data-testid': 'node-title-input' }"
-          @edit="handleTitleEdit"
-          @cancel="handleTitleCancel"
-        />
-        <i-lucide:pin
-          v-if="isPinned"
-          class="size-5 text-node-component-header-icon"
-          data-testid="node-pin-indicator"
-        />
-      </div>
       <div class="flex items-center lod-toggle shrink-0">
         <IconButton
           v-if="isSubgraphNode"
@@ -70,7 +74,6 @@
           ></i>
         </IconButton>
       </div>
-      <LODFallback />
     </div>
   </div>
 </template>