admin/farion1231_cc-switch
1
0
Fork 0
mirror of https://github.com/farion1231/cc-switch.git synced 2026-01-31 09:43:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(settings): correct footer layout in advanced settings tab

Browse Source 
- 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
This commit is contained in:
Jason
2026-01-26 22:46:57 +08:00
parent 785e1b5add
commit c74f801d66
2 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.tsx
View File

@@ -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

56
src/components/settings/SettingsPage.tsx
View File

@@ -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>
)}