From c04f636bbed53618c27a20191dcccf81836d5341 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 17 Oct 2025 23:09:21 +0800
Subject: [PATCH] fix: redesign settings dialog layout to prevent content
 overflow and visual jitter

Fixed multiple layout issues in the settings dialog:

1. Dialog structure: Changed from grid to flexbox layout
   - Removed global padding from DialogContent
   - Added individual padding to DialogHeader (px-6 pt-6) and DialogFooter (px-6 pb-6 pt-4)
   - Added max-h-[90vh] constraint to prevent dialog from exceeding viewport

2. Content area improvements:
   - Replaced max-h-[70vh] with flex-1 for better space utilization
   - Set min-h-[480px] on content wrapper to maintain consistent dialog height
   - Applied min-h-[400px] to all TabsContent components to prevent height jumps

3. Scrollbar optimization:
   - Changed overflow-y-auto to overflow-y-scroll to force scrollbar gutter
   - Eliminates horizontal shift when switching between tabs with different content heights
   - Consistent with main app layout approach (App.tsx)

4. Footer enhancement:
   - Added border-t and bg-muted/20 for visual separation
   - Fixed footer overlapping content in advanced tab

Result: Settings dialog now displays all content properly without requiring
fullscreen, maintains consistent height across tabs, and eliminates layout shift
when switching tabs.
---
 src/components/settings/SettingsDialog.tsx | 126 ++++++++++-----------
 src/components/ui/dialog.tsx               |   6 +-
 2 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx
index 540e34e..44d4dcd 100644
--- a/src/components/settings/SettingsDialog.tsx
+++ b/src/components/settings/SettingsDialog.tsx
@@ -171,21 +171,21 @@ export function SettingsDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleDialogChange}>
-      <DialogContent className="max-w-3xl gap-6">
+      <DialogContent className="max-w-3xl">
         <DialogHeader>
           <DialogTitle>{t("settings.title")}</DialogTitle>
         </DialogHeader>
 
         {isBusy ? (
-          <div className="flex min-h-[320px] items-center justify-center">
+          <div className="flex min-h-[320px] items-center justify-center px-6">
             <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="flex max-h-[70vh] flex-col gap-6 overflow-hidden">
+          <div className="flex-1 overflow-y-scroll px-6 min-h-[480px]">
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
-              className="flex flex-1 flex-col"
+              className="flex flex-col h-full"
             >
               <TabsList className="grid w-full grid-cols-3">
                 <TabsTrigger value="general">
@@ -197,65 +197,63 @@ export function SettingsDialog({
                 <TabsTrigger value="about">{t("common.about")}</TabsTrigger>
               </TabsList>
 
-              <div className="flex-1 overflow-y-auto pr-1">
-                <TabsContent value="general" className="space-y-6 pt-4">
-                  {settings ? (
-                    <>
-                      <LanguageSettings
-                        value={settings.language}
-                        onChange={(lang) => updateSettings({ language: lang })}
-                      />
-                      <WindowSettings
-                        settings={settings}
-                        onChange={updateSettings}
-                      />
-                      <ConfigPathDisplay
-                        path={configPath}
-                        onOpen={openConfigFolder}
-                      />
-                    </>
-                  ) : null}
-                </TabsContent>
+              <TabsContent value="general" className="space-y-6 mt-6 min-h-[400px]">
+                {settings ? (
+                  <>
+                    <LanguageSettings
+                      value={settings.language}
+                      onChange={(lang) => updateSettings({ language: lang })}
+                    />
+                    <WindowSettings
+                      settings={settings}
+                      onChange={updateSettings}
+                    />
+                    <ConfigPathDisplay
+                      path={configPath}
+                      onOpen={openConfigFolder}
+                    />
+                  </>
+                ) : null}
+              </TabsContent>
 
-                <TabsContent value="advanced" className="space-y-6 pt-4">
-                  {settings ? (
-                    <>
-                      <DirectorySettings
-                        appConfigDir={appConfigDir}
-                        resolvedDirs={resolvedDirs}
-                        onAppConfigChange={updateAppConfigDir}
-                        onBrowseAppConfig={browseAppConfigDir}
-                        onResetAppConfig={resetAppConfigDir}
-                        claudeDir={settings.claudeConfigDir}
-                        codexDir={settings.codexConfigDir}
-                        onDirectoryChange={updateDirectory}
-                        onBrowseDirectory={browseDirectory}
-                        onResetDirectory={resetDirectory}
-                      />
-                      <ImportExportSection
-                        status={importStatus}
-                        selectedFile={selectedFile}
-                        errorMessage={errorMessage}
-                        backupId={backupId}
-                        isImporting={isImporting}
-                        onSelectFile={selectImportFile}
-                        onImport={importConfig}
-                        onExport={exportConfig}
-                        onClear={clearSelection}
-                      />
-                    </>
-                  ) : null}
-                </TabsContent>
+              <TabsContent value="advanced" className="space-y-6 mt-6 min-h-[400px]">
+                {settings ? (
+                  <>
+                    <DirectorySettings
+                      appConfigDir={appConfigDir}
+                      resolvedDirs={resolvedDirs}
+                      onAppConfigChange={updateAppConfigDir}
+                      onBrowseAppConfig={browseAppConfigDir}
+                      onResetAppConfig={resetAppConfigDir}
+                      claudeDir={settings.claudeConfigDir}
+                      codexDir={settings.codexConfigDir}
+                      onDirectoryChange={updateDirectory}
+                      onBrowseDirectory={browseDirectory}
+                      onResetDirectory={resetDirectory}
+                    />
+                    <ImportExportSection
+                      status={importStatus}
+                      selectedFile={selectedFile}
+                      errorMessage={errorMessage}
+                      backupId={backupId}
+                      isImporting={isImporting}
+                      onSelectFile={selectImportFile}
+                      onImport={importConfig}
+                      onExport={exportConfig}
+                      onClear={clearSelection}
+                    />
+                  </>
+                ) : null}
+              </TabsContent>
 
-                <TabsContent value="about" className="pt-4">
-                  <AboutSection isPortable={isPortable} />
-                </TabsContent>
-              </div>
+              <TabsContent value="about" className="mt-6 min-h-[400px]">
+                <AboutSection isPortable={isPortable} />
+              </TabsContent>
             </Tabs>
           </div>
         )}
 
-        <DialogFooter className="gap-2">
+        <DialogFooter>
           <Button variant="outline" onClick={handleCancel}>
             {t("common.cancel")}
           </Button>
@@ -280,12 +278,14 @@ export function SettingsDialog({
           <DialogHeader>
             <DialogTitle>{t("settings.restartRequired")}</DialogTitle>
           </DialogHeader>
-          <p className="text-sm text-muted-foreground">
-            {t("settings.restartRequiredMessage", {
-              defaultValue: "配置目录已变更，需要重启应用生效。",
-            })}
-          </p>
-          <DialogFooter className="gap-2">
+          <div className="px-6">
+            <p className="text-sm text-muted-foreground">
+              {t("settings.restartRequiredMessage", {
+                defaultValue: "配置目录已变更，需要重启应用生效。",
+              })}
+            </p>
+          </div>
+          <DialogFooter>
             <Button variant="outline" onClick={handleRestartLater}>
               {t("settings.restartLater")}
             </Button>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 8c90de3..88d2405 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -55,7 +55,7 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed left-1/2 top-1/2 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          "fixed left-1/2 top-1/2 flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border bg-white dark:bg-gray-900 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
           zIndexMap[zIndex],
           className,
         )}
@@ -78,7 +78,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6",
       className,
     )}
     {...props}
@@ -92,7 +92,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 pb-6 pt-4 border-t border-border bg-muted/20",
       className,
     )}
     {...props}