mobile responsive

components/ui/modal.tsx

@@ -4,7 +4,11 @@ import * as React from "react";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
-/** A minimal centered modal dialog. Closes on overlay click and Escape. */
+/**
+ * A minimal modal dialog. Closes on overlay click and Escape. Centred from sm
+ * up; on a phone it rises from the bottom as a full-width sheet. Either way
+ * it never outgrows the screen — the body scrolls inside it.
+ */
 export function Modal({
   open,
   onClose,
@@ -29,14 +33,14 @@ export function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-center sm:p-4"
       onClick={onClose}
     >
       <div
-        className="w-full max-w-lg rounded-2xl border border-border bg-card shadow-xl"
+        className="flex max-h-[92dvh] w-full max-w-lg flex-col rounded-t-2xl border border-border bg-card shadow-xl sm:max-h-[85dvh] sm:rounded-2xl"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3.5 sm:px-5 sm:py-4">
           <h2 className="text-base font-semibold text-foreground">{title}</h2>
           <Button
             variant="ghost"
@@ -48,7 +52,9 @@ export function Modal({
             <X className="size-4" />
           </Button>
         </div>
-        <div className="px-5 py-4">{children}</div>
+        <div className="min-h-0 overflow-y-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
+          {children}
+        </div>
       </div>
     </div>
   );