From 404297cd307742b8c553af2910b776057c4f52dc Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 18 Oct 2025 16:26:37 +0800
Subject: [PATCH] fix: improve settings dialog UX with stable button width and
 smart scrollbar

Fix two UX issues in the settings dialog:

1. Check for Updates button width stability
   - Added min-w-[140px] to prevent layout shift during state changes
   - Button maintains consistent width across all states:
     * "Check for Updates" (idle)
     * "Checking..." (with spinner)
     * "Update to vX.X.X" (with download icon)
     * "Installing..." (with spinner)

2. Settings dialog scrollbar behavior
   - Changed overflow-y-scroll to overflow-y-auto
   - Scrollbar now only appears when content actually overflows
   - Prevents unnecessary scrollbar on About tab (content < 400px)
   - Maintains min-h-[400px] on all tabs to prevent dialog height jump

These changes improve visual stability and reduce UI clutter while
maintaining consistent dialog dimensions during tab switching.
---
 src/components/settings/AboutSection.tsx   | 1 +
 src/components/settings/SettingsDialog.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/AboutSection.tsx b/src/components/settings/AboutSection.tsx
index 7645cf7..4ab1205 100644
--- a/src/components/settings/AboutSection.tsx
+++ b/src/components/settings/AboutSection.tsx
@@ -185,6 +185,7 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
               size="sm"
               onClick={handleCheckUpdate}
               disabled={isChecking || isDownloading}
+              className="min-w-[140px]"
             >
               {isDownloading ? (
                 <span className="inline-flex items-center gap-2">
diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx
index de7b902..17bd60c 100644
--- a/src/components/settings/SettingsDialog.tsx
+++ b/src/components/settings/SettingsDialog.tsx
@@ -179,7 +179,7 @@ export function SettingsDialog({
             <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="flex-1 overflow-y-scroll px-6 py-4">
+          <div className="flex-1 overflow-y-auto px-6 py-4">
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}