mobile responsive

components/ui/modal.tsx

@@ -41,7 +41,12 @@ export function Modal({
         onClick={(e) => e.stopPropagation()}
       >
         <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>
+          <h2
+            title={title}
+            className="min-w-0 truncate text-base font-semibold text-foreground"
+          >
+            {title}
+          </h2>
           <Button
             variant="ghost"
             size="sm"
@@ -52,7 +57,7 @@ export function Modal({
             <X className="size-4" />
           </Button>
         </div>
-        <div className="min-h-0 overflow-y-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
+        <div className="min-h-0 overflow-y-auto [overflow-wrap:anywhere] px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-5">
           {children}
         </div>
       </div>