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.
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user