fix: make the add form scrollable for smaller screens

This commit is contained in:
Nicolas Meienberger
2025-10-02 18:47:53 +02:00
parent 1e7530cc09
commit c013351026
4 changed files with 136 additions and 49 deletions

View File

@@ -15,6 +15,7 @@ import {
DialogTitle,
DialogTrigger,
} from "./ui/dialog";
import { ScrollArea } from "./ui/scroll-area";
type Props = {
open: boolean;
@@ -46,25 +47,27 @@ export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create volume</DialogTitle>
<DialogDescription>Enter a name for the new volume</DialogDescription>
</DialogHeader>
<CreateVolumeForm
mode="create"
formId={formId}
onSubmit={(values) => {
create.mutate({ body: { config: values, name: values.name } });
}}
/>
<DialogFooter>
<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button type="submit" form={formId} disabled={create.isPending}>
Create
</Button>
</DialogFooter>
<ScrollArea className="h-[500px]">
<DialogHeader>
<DialogTitle>Create volume</DialogTitle>
<DialogDescription>Enter a name for the new volume</DialogDescription>
</DialogHeader>
<CreateVolumeForm
mode="create"
formId={formId}
onSubmit={(values) => {
create.mutate({ body: { config: values, name: values.name } });
}}
/>
<DialogFooter className="mt-4">
<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button type="submit" form={formId} disabled={create.isPending}>
Create
</Button>
</DialogFooter>
</ScrollArea>
</DialogContent>
</Dialog>
);