From c74f801d66a8ac5e3ae3c6bd7d923988d374d667 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 26 Jan 2026 22:46:57 +0800
Subject: [PATCH] fix(settings): correct footer layout in advanced settings tab

- Establish proper flexbox height chain from App to SettingsPage
- Move save button to fixed footer outside scrollable area
- Align footer styling with FullScreenPanel for consistency
---
 src/App.tsx                              |  5 ++-
 src/components/settings/SettingsPage.tsx | 56 ++++++++++++++----------
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a760d08af..8a609efbb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -635,6 +635,7 @@ function App() {
       <AnimatePresence mode="wait">
         <motion.div
           key={currentView}
+          className="flex-1 min-h-0"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -959,8 +960,8 @@ function App() {
         </div>
       </header>
 
-      <main className="flex-1 pb-12 animate-fade-in ">
-        <div className="pb-12">{renderContent()}</div>
+      <main className="flex-1 min-h-0 flex flex-col animate-fade-in">
+        {renderContent()}
       </main>
 
       <AddProviderDialog
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
index 650977be2..ebd61a9a1 100644
--- a/src/components/settings/SettingsPage.tsx
+++ b/src/components/settings/SettingsPage.tsx
@@ -207,7 +207,7 @@ export function SettingsPage({
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-8rem)] overflow-hidden px-6">
+    <div className="flex flex-col h-full overflow-hidden px-6">
       {isBusy ? (
         <div className="flex flex-1 items-center justify-center">
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -229,8 +229,9 @@ export function SettingsPage({
             <TabsTrigger value="about">{t("common.about")}</TabsTrigger>
           </TabsList>
 
-          <div className="flex-1 overflow-y-auto overflow-x-hidden pr-2">
-            <TabsContent value="general" className="space-y-6 mt-0">
+          <div className="flex-1 min-h-0 flex flex-col">
+            <div className="flex-1 overflow-y-auto overflow-x-hidden pr-2">
+              <TabsContent value="general" className="space-y-6 mt-0">
               {settings ? (
                 <motion.div
                   initial={{ opacity: 0, y: 10 }}
@@ -267,7 +268,7 @@ export function SettingsPage({
               ) : null}
             </TabsContent>
 
-            <TabsContent value="advanced" className="space-y-6 mt-0 pb-6">
+            <TabsContent value="advanced" className="space-y-6 mt-0 pb-4">
               {settings ? (
                 <motion.div
                   initial={{ opacity: 0, y: 10 }}
@@ -619,26 +620,6 @@ export function SettingsPage({
                       </AccordionContent>
                     </AccordionItem>
                   </Accordion>
-
-                  <div className="pt-4">
-                    <Button
-                      onClick={handleSave}
-                      className="w-full h-12 text-base font-medium"
-                      disabled={isSaving}
-                    >
-                      {isSaving ? (
-                        <span className="inline-flex items-center gap-2">
-                          <Loader2 className="h-5 w-5 animate-spin" />
-                          {t("settings.saving")}
-                        </span>
-                      ) : (
-                        <>
-                          <Save className="mr-2 h-5 w-5" />
-                          {t("common.save")}
-                        </>
-                      )}
-                    </Button>
-                  </div>
                 </motion.div>
               ) : null}
             </TabsContent>
@@ -650,6 +631,33 @@ export function SettingsPage({
             <TabsContent value="usage" className="mt-0">
               <UsageDashboard />
             </TabsContent>
+            </div>
+
+            {activeTab === "advanced" && settings && (
+              <div
+                className="flex-shrink-0 py-4 border-t border-border-default"
+                style={{ backgroundColor: "hsl(var(--background))" }}
+              >
+                <div className="px-6 flex items-center justify-end gap-3">
+                  <Button
+                    onClick={handleSave}
+                    disabled={isSaving}
+                  >
+                    {isSaving ? (
+                      <span className="inline-flex items-center gap-2">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        {t("settings.saving")}
+                      </span>
+                    ) : (
+                      <>
+                        <Save className="mr-2 h-4 w-4" />
+                        {t("common.save")}
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
           </div>
         </Tabs>
       )}