From 4533ef03ec96cfdf8365df117cd1058c782e9cce Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Thu, 20 Aug 2026 21:15:39 +0100
Subject: [PATCH] fix(web): make every panel scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 4 ++--
 web/Gallery/Gallery.tsx         | 2 +-
 web/Generate/Generate.tsx       | 2 +-
 web/Providers/Providers.tsx     | 4 +++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/Collections/Collections.tsx b/web/Collections/Collections.tsx
index e2c79a2..2120155 100644
--- a/web/Collections/Collections.tsx
+++ b/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
diff --git a/web/Gallery/Gallery.tsx b/web/Gallery/Gallery.tsx
index 1e7388d..660ed67 100644
--- a/web/Gallery/Gallery.tsx
+++ b/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'}
diff --git a/web/Generate/Generate.tsx b/web/Generate/Generate.tsx
index bbc1d44..3f1c133 100644
--- a/web/Generate/Generate.tsx
+++ b/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
diff --git a/web/Providers/Providers.tsx b/web/Providers/Providers.tsx
index ea4fbdb..0b5b11f 100644
--- a/web/Providers/Providers.tsx
+++ b/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">