fix: make the add form scrollable for smaller screens

apps/client/app/components/create-volume-dialog.tsx

@@ -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>
 	);

apps/client/app/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "~/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

apps/client/package.json

@@ -14,6 +14,7 @@
 		"@radix-ui/react-alert-dialog": "^1.1.15",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-scroll-area": "^1.2.10",
 		"@radix-ui/react-select": "^2.2.5",
 		"@radix-ui/react-slot": "^1.2.3",
 		"@radix-ui/react-switch": "^1.2.6",