feat(web): bottom-sheet modals and collapsing component grids

web/components/ui/Card.tsx

@@ -24,7 +24,7 @@ export function Card({ className, padding = true, children, ...props }: CardProp
 
 export function CardHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={clsx("mb-4 flex items-center justify-between", className)} {...props}>
+    <div className={clsx("mb-4 flex flex-wrap items-center justify-between gap-2", className)} {...props}>
       {children}
     </div>
   );

web/components/ui/Modal.tsx

@@ -25,10 +25,10 @@ export function Modal({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
       <div
-        className={`relative z-10 w-full ${wide ? "max-w-2xl" : "max-w-md"} max-h-[90vh] overflow-auto rounded border border-border bg-surface shadow-panel`}
+        className={`relative z-10 w-full ${wide ? "sm:max-w-2xl" : "sm:max-w-md"} max-h-[85dvh] overflow-auto rounded rounded-b-none border border-b-0 border-border bg-surface shadow-panel sm:rounded sm:border-b`}
         role="dialog"
         aria-modal="true"
       >