From d53e2cb9a02e2206e7dd22523dfabe6ec2f17a26 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 26 Apr 2026 02:15:36 +0800
Subject: [PATCH] fix(web): prevent tab list layout shift when save button
 toggles visibility

Use invisible class instead of conditional rendering for save buttons
in bot, pipeline, and knowledge base detail pages, so the button always
occupies space and the tab list position stays stable across tab switches.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/app/home/bots/BotDetailContent.tsx          | 13 ++++++++-----
 web/src/app/home/knowledge/KBDetailContent.tsx      |  7 ++++++-
 .../app/home/pipelines/PipelineDetailContent.tsx    |  7 ++++++-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/src/app/home/bots/BotDetailContent.tsx b/web/src/app/home/bots/BotDetailContent.tsx
index e0543baa..8440e47a 100644
--- a/web/src/app/home/bots/BotDetailContent.tsx
+++ b/web/src/app/home/bots/BotDetailContent.tsx
@@ -174,11 +174,14 @@ export default function BotDetailContent({ id }: { id: string }) {
               </div>
             )}
           </div>
-          {activeTab === 'config' && (
-            <Button type="submit" form="bot-form" disabled={!formDirty}>
-              {t('common.save')}
-            </Button>
-          )}
+          <Button
+            type="submit"
+            form="bot-form"
+            disabled={!formDirty}
+            className={activeTab !== 'config' ? 'invisible' : ''}
+          >
+            {t('common.save')}
+          </Button>
         </div>
 
         {/* Horizontal Tabs */}
diff --git a/web/src/app/home/knowledge/KBDetailContent.tsx b/web/src/app/home/knowledge/KBDetailContent.tsx
index 43c79c07..5323ed5d 100644
--- a/web/src/app/home/knowledge/KBDetailContent.tsx
+++ b/web/src/app/home/knowledge/KBDetailContent.tsx
@@ -146,7 +146,12 @@ export default function KBDetailContent({ id }: { id: string }) {
           <h1 className="text-xl font-semibold">
             {t('knowledge.editKnowledgeBase')}
           </h1>
-          <Button type="submit" form="kb-form" disabled={!formDirty}>
+          <Button
+            type="submit"
+            form="kb-form"
+            disabled={!formDirty}
+            className={activeTab !== 'metadata' ? 'invisible' : ''}
+          >
             {t('common.save')}
           </Button>
         </div>
diff --git a/web/src/app/home/pipelines/PipelineDetailContent.tsx b/web/src/app/home/pipelines/PipelineDetailContent.tsx
index 2b8c76c1..4bfad314 100644
--- a/web/src/app/home/pipelines/PipelineDetailContent.tsx
+++ b/web/src/app/home/pipelines/PipelineDetailContent.tsx
@@ -80,7 +80,12 @@ export default function PipelineDetailContent({ id }: { id: string }) {
       {/* Sticky Header: title + save button */}
       <div className="flex items-center justify-between pb-4 shrink-0">
         <h1 className="text-xl font-semibold">{t('pipelines.editPipeline')}</h1>
-        <Button type="submit" form="pipeline-form" disabled={!formDirty}>
+        <Button
+          type="submit"
+          form="pipeline-form"
+          disabled={!formDirty}
+          className={activeTab !== 'config' ? 'invisible' : ''}
+        >
           {t('common.save')}
         </Button>
       </div>