From 9652871aaffbd8853ab35efd08ce35f22fb30294 Mon Sep 17 00:00:00 2001
From: jaeone94 <89377375+jaeone94@users.noreply.github.com>
Date: Sat, 14 Mar 2026 00:44:04 +0900
Subject: [PATCH] [bugfix] Align advanced footer design with subgraph footer
 layout (#9879)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Fix advanced widget footer on Vue nodes to use the same absolute
positioning and design as subgraph/error footers, and add dual-tab
layout when both error and advanced states coexist.

## Changes
- **What**: Changed advanced footer (Case 4) from relative to absolute
positioning matching subgraph footer design. Added new Case 1b for Error
+ Advanced dual-tab layout on regular nodes.
- **i18n**: Added `showAdvancedShort` / `hideAdvancedShort` keys for
compact dual-tab display

## Review Focus
- Visual consistency between advanced footer and subgraph footer across
collapsed/expanded states
- Dual-tab (Error + Advanced) layout mirrors subgraph dual-tab (Error +
Enter Subgraph)

## Screenshots
**Before**

<img width="451" height="313" alt="image"
src="https://github.com/user-attachments/assets/98998e27-2283-49b4-8e32-3593c5577851"
/>

**After**
<img width="902" height="687" alt="image"
src="https://github.com/user-attachments/assets/83e7cec8-1ee7-44a6-b984-fd4d7282edd1"
/>
<img width="1150" height="1154" alt="image3"
src="https://github.com/user-attachments/assets/32605807-4c43-48e3-bb6e-b645afd1a403"
/>
<img width="1212" height="415" alt="image4"
src="https://github.com/user-attachments/assets/3e8184a6-6be4-4c83-98e3-0a6732ae4e3f"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9879-bugfix-Align-advanced-footer-design-with-subgraph-footer-layout-3226d73d365081868c3af5df528dc81e)
by [Unito](https://www.unito.io)
---
 src/locales/en/main.json                      |  2 +
 .../vueNodes/components/NodeFooter.vue        | 78 ++++++++++++++++---
 2 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 6a280c636e..ce18b2ce1c 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3338,6 +3338,7 @@
     "inputsNoneTooltip": "Node has no inputs",
     "advancedInputs": "ADVANCED INPUTS",
     "showAdvancedInputsButton": "Show advanced inputs",
+    "showAdvancedShort": "Show advanced",
     "properties": "Properties",
     "nodeState": "Node state",
     "settings": "Settings",
@@ -3375,6 +3376,7 @@
     "fallbackGroupTitle": "Group",
     "fallbackNodeTitle": "Node",
     "hideAdvancedInputsButton": "Hide advanced inputs",
+    "hideAdvancedShort": "Hide advanced",
     "errors": "Errors",
     "noErrors": "No errors",
     "executionErrorOccurred": "An error occurred during execution. Check the Errors tab for details.",
diff --git a/src/renderer/extensions/vueNodes/components/NodeFooter.vue b/src/renderer/extensions/vueNodes/components/NodeFooter.vue
index 8d72985473..120c9842ac 100644
--- a/src/renderer/extensions/vueNodes/components/NodeFooter.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeFooter.vue
@@ -38,6 +38,60 @@
     </Button>
   </template>
 
+  <!-- Case 1b: Advanced + Error (Dual Tabs, Regular Nodes) -->
+  <template
+    v-else-if="
+      !isSubgraph &&
+      hasAnyError &&
+      showErrorsTabEnabled &&
+      (showAdvancedInputsButton || showAdvancedState)
+    "
+  >
+    <Button
+      variant="textonly"
+      :class="
+        cn(
+          getTabStyles(false),
+          errorTabWidth,
+          '-z-5 bg-destructive-background text-white hover:bg-destructive-background-hover'
+        )
+      "
+      @click.stop="$emit('openErrors')"
+    >
+      <div class="flex size-full items-center justify-center gap-2">
+        <span class="truncate">{{ t('g.error') }}</span>
+        <i class="icon-[lucide--info] size-4 shrink-0" />
+      </div>
+    </Button>
+
+    <Button
+      variant="textonly"
+      :class="
+        cn(
+          getTabStyles(true),
+          enterTabFullWidth,
+          '-z-10 bg-node-component-header-surface'
+        )
+      "
+      @click.stop="$emit('toggleAdvanced')"
+    >
+      <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
+        <span class="truncate">{{
+          showAdvancedState
+            ? t('rightSidePanel.hideAdvancedShort')
+            : t('rightSidePanel.showAdvancedShort')
+        }}</span>
+        <i
+          :class="
+            showAdvancedState
+              ? 'icon-[lucide--chevron-up] size-4 shrink-0'
+              : 'icon-[lucide--settings-2] size-4 shrink-0'
+          "
+        />
+      </div>
+    </Button>
+  </template>
+
   <!-- Case 2: Error Only (Full Width) -->
   <template v-else-if="hasAnyError && showErrorsTabEnabled">
     <Button
@@ -81,17 +135,19 @@
   </template>
 
   <!-- Case 4: Advanced Footer (Regular Nodes) -->
-  <div
+  <Button
     v-else-if="showAdvancedInputsButton || showAdvancedState"
-    class="relative -z-1 -mt-5 flex h-7 w-full divide-x divide-component-node-border overflow-hidden rounded-t-none rounded-b-2xl text-xs"
+    variant="textonly"
+    :class="
+      cn(
+        getTabStyles(true),
+        hasAnyError ? 'w-[calc(100%+8px)]' : 'w-full',
+        '-z-10 bg-node-component-header-surface'
+      )
+    "
+    @click.stop="$emit('toggleAdvanced')"
   >
-    <Button
-      variant="textonly"
-      :class="
-        cn('h-full flex-1 rounded-none', isCollapsed ? 'py-2' : 'pt-7 pb-2')
-      "
-      @click.stop="$emit('toggleAdvanced')"
-    >
+    <div class="flex size-full items-center justify-center gap-2">
       <template v-if="showAdvancedState">
         <span class="truncate">{{
           t('rightSidePanel.hideAdvancedInputsButton')
@@ -104,8 +160,8 @@
         }}</span>
         <i class="icon-[lucide--settings-2] size-4 shrink-0" />
       </template>
-    </Button>
-  </div>
+    </div>
+  </Button>
 </template>
 
 <script setup lang="ts">