fix(web): make every panel scroll

Each panel's root was a plain div with padding, so anything past the panel's
height was simply not reachable — the gallery showed its first two rows of
sixty images, and the Providers panel cut off mid-card. The shell hands a
panel a fixed-height box and does not scroll it for you; plugins/music has
had `h-full overflow-y-auto` on every panel root since it was written.

Collections gets it in both places, the list and the detail view, which are
two separate returns in one file and would otherwise disagree.

web/Collections/Collections.tsx

@@ -15,7 +15,7 @@ export const Collections = () => {
   if (openId) return <Detail manager={manager} searchParams={searchParams} />;
 
   return (
-    <div className="space-y-6 p-4">
+    <div className="h-full space-y-6 overflow-y-auto p-4">
       <div className="flex gap-2">
         <Input
           placeholder="New collection — an afternoon, a suite, a client"
@@ -107,7 +107,7 @@ const Detail = ({ manager, searchParams }: DetailProps) => {
   if (!collection) return <p className="p-4 text-sm text-muted-foreground">Loading…</p>;
 
   return (
-    <div className="space-y-6 p-4">
+    <div className="h-full space-y-6 overflow-y-auto p-4">
       <div className="flex items-baseline gap-3">
         <Link to={backTo} className="text-sm text-muted-foreground hover:text-foreground">
           ‹ Collections

web/Gallery/Gallery.tsx

@@ -21,7 +21,7 @@ export const Gallery = () => {
   }
 
   return (
-    <div className="space-y-6 p-4">
+    <div className="h-full space-y-6 overflow-y-auto p-4">
       <div className="flex items-center justify-between">
         <p className="text-sm text-muted-foreground">
           {manager.succeeded.length} image{manager.succeeded.length === 1 ? '' : 's'}

web/Generate/Generate.tsx

@@ -22,7 +22,7 @@ export const Generate = () => {
   }
 
   return (
-    <div className="space-y-6 p-4">
+    <div className="h-full space-y-6 overflow-y-auto p-4">
       <div className="space-y-2">
         <Label htmlFor="atelier-prompt">Prompt</Label>
         <Textarea

web/Providers/Providers.tsx

@@ -103,8 +103,10 @@ export const Providers = () => {
 
   if (loading) return null;
 
+  // `content-start`: a grid told to fill its height stretches its rows, which would pull the two cards
+  // tall and leave their text floating in the middle of them.
   return (
-    <div className="grid gap-5">
+    <div className="grid h-full content-start gap-5 overflow-y-auto p-4">
       <div className="grid gap-3 rounded-lg border border-duck-dark/10 p-4 dark:border-foreground/10">
         <p className="text-sm font-medium text-duck-dark dark:text-foreground">Add a provider</p>
         <p className="text-xs text-duck-dark/50 dark:text-foreground/50">