fix(provider): add footer and improve layout spacing for common config editor dialog

- Add DialogFooter with Cancel and Save buttons to match Codex common config modal
- Improve dialog layout spacing with proper padding (px-6, py-4)
- Add flex layout with overflow handling for better responsiveness
- Fix content being too close to dialog edges
This commit is contained in:
Jason
2025-11-01 18:59:19 +08:00
parent c168873c1e
commit b1f7840e45

View File

@@ -4,8 +4,11 @@ import {
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogFooter,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Save } from "lucide-react";
interface CommonConfigEditorProps { interface CommonConfigEditorProps {
value: string; value: string;
@@ -105,15 +108,15 @@ export function CommonConfigEditor({
open={isModalOpen} open={isModalOpen}
onOpenChange={(open) => !open && onModalClose()} onOpenChange={(open) => !open && onModalClose()}
> >
<DialogContent className="sm:max-w-[600px]"> <DialogContent className="sm:max-w-[600px] max-h-[90vh] flex flex-col p-0">
<DialogHeader> <DialogHeader className="px-6 pt-6 pb-0">
<DialogTitle> <DialogTitle>
{t("claudeConfig.editCommonConfigTitle", { {t("claudeConfig.editCommonConfigTitle", {
defaultValue: "编辑通用配置片段", defaultValue: "编辑通用配置片段",
})} })}
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("claudeConfig.commonConfigHint", { {t("claudeConfig.commonConfigHint", {
defaultValue: "通用配置片段将合并到所有启用它的供应商配置中", defaultValue: "通用配置片段将合并到所有启用它的供应商配置中",
@@ -140,6 +143,15 @@ export function CommonConfigEditor({
</p> </p>
)} )}
</div> </div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onModalClose}>
{t("common.cancel")}
</Button>
<Button type="button" onClick={onModalClose} className="gap-2">
<Save className="w-4 h-4" />
{t("common.save")}
</Button>
</DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>