From f9f3d339110f566b87d9de563397b071d1f41718 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Wed, 28 Jan 2026 20:34:23 +0800
Subject: [PATCH] fix(variable-inspect): anchor clear button to right side of
 tab header

Position the clear button relative to the right divider instead of
following the tab labels, ensuring consistent positioning across
different language translations. Also fix tab switching jitter by
setting a fixed header height.
---
 web/app/components/workflow/variable-inspect/tab-header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/variable-inspect/tab-header.tsx b/web/app/components/workflow/variable-inspect/tab-header.tsx
index aaf3b2573b..be000a8872 100644
--- a/web/app/components/workflow/variable-inspect/tab-header.tsx
+++ b/web/app/components/workflow/variable-inspect/tab-header.tsx
@@ -22,7 +22,7 @@ const TabHeader: FC<TabHeaderProps> = ({
   const { t } = useTranslation('workflow')
 
   return (
-    <div className="flex shrink-0 items-center gap-0.5 pl-3 pr-2 pt-2">
+    <div className="flex h-10 w-full shrink-0 items-center gap-0.5 pl-3 pr-2">
       {TAB_ITEMS.map(tab => (
         <button
           key={tab.value}
@@ -38,7 +38,7 @@ const TabHeader: FC<TabHeaderProps> = ({
           {t(tab.labelKey)}
         </button>
       ))}
-      {children}
+      <div className="ml-auto">{children}</div>
     </div>
   )
 }