fix: node header DOM hierarchy (#5961)

## 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)

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">
+      <div class="relative flex items-center gap-2.5">
-        <IconButton
+        <div class="flex items-center lod-toggle shrink-0 px-0.5">
-          size="fit-content"
+          <IconButton
-          type="transparent"
+            size="fit-content"
-          data-testid="node-collapse-button"
+            type="transparent"
-          @click.stop="handleCollapse"
+            data-testid="node-collapse-button"
-          @dblclick.stop
+            @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
+          <EditableText
-            :class="
+            :model-value="displayTitle"
-              cn(
+            :is-editing="isEditing"
-                'icon-[lucide--chevron-down] size-5 transition-transform',
+            :input-attrs="{ 'data-testid': 'node-title-input' }"
-                collapsed && '-rotate-90'
+            @edit="handleTitleEdit"
-              )
+            @cancel="handleTitleCancel"
-            "
+          />
-            class="text-xs leading-none relative top-px text-node-component-header-icon"
+          <i-lucide:pin
-          ></i>
+            v-if="isPinned"
-        </IconButton>
+            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>