fix: add scrollbars to provider dialogs and simplify theme toggle

## Changes

### Add scrollbars to provider dialogs
- **AddProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper
- **EditProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper
- Both dialogs now follow the same scrolling pattern as other dialogs in the app
- Wrap ProviderForm in `<div className="flex-1 overflow-y-auto -mx-6 px-6">` for proper scrolling

### Simplify theme toggle
- **mode-toggle.tsx**: Change from dropdown menu to direct toggle button
- Remove DropdownMenu and related imports
- Click now directly toggles between light and dark mode
- Simpler UX: one click to switch themes instead of opening a menu
- Remove "system" theme option from quick toggle (still available in settings if needed)

## Benefits
- **Consistent scrolling**: All dialogs now have proper scroll behavior when content exceeds viewport height
- **Better UX**: Theme toggle is faster and more intuitive with direct click
- **Code simplification**: Removed unnecessary dropdown menu complexity from theme toggle

All TypeScript type checks and Prettier formatting checks pass.
This commit is contained in:
Jason
2025-10-16 16:39:03 +08:00
parent cfefe6b52a
commit 31f56f7c86
3 changed files with 37 additions and 59 deletions

View File

@@ -60,7 +60,7 @@ export function EditProviderDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl">
<DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
<DialogHeader>
<DialogTitle>
{t("provider.editProvider", { defaultValue: "编辑供应商" })}
@@ -72,17 +72,19 @@ export function EditProviderDialog({
</DialogDescription>
</DialogHeader>
<ProviderForm
appType={appType}
submitLabel={t("common.save", { defaultValue: "保存" })}
onSubmit={handleSubmit}
onCancel={() => onOpenChange(false)}
initialData={{
name: provider.name,
websiteUrl: provider.websiteUrl,
settingsConfig: provider.settingsConfig,
}}
/>
<div className="flex-1 overflow-y-auto -mx-6 px-6">
<ProviderForm
appType={appType}
submitLabel={t("common.save", { defaultValue: "保存" })}
onSubmit={handleSubmit}
onCancel={() => onOpenChange(false)}
initialData={{
name: provider.name,
websiteUrl: provider.websiteUrl,
settingsConfig: provider.settingsConfig,
}}
/>
</div>
</DialogContent>
</Dialog>
);