contain the pickers and let their lists scroll

The carousel list ran off the bottom of the window with no way to reach the end
of it. There are twenty-odd carousels now — three sections' worth — where there
were six when the dialog was written.

`max-h-[80svh]` on the dialog and `min-h-0 overflow-y-auto` on the list. Both are
needed and the second is the one that is easy to miss: a flex child will not
shrink below its content without `min-h-0`, so the list pushes the dialog past
the screen and the overflow never engages. A max-height alone would have looked
like it did nothing.

`svh` rather than `vh`, because on a phone `vh` is the viewport with the browser
chrome hidden — a dialog sized in it is taller than what you can see.

AddComponentDialog gets the same treatment. Its list is a dozen kinds now and was
the same failure waiting for a shorter screen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/CarouselPicker.tsx

@@ -70,7 +70,19 @@ export const CarouselPicker = ({
 
   return (
     <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
-      <DialogContent className="sm:max-w-lg">
+      {/*
+        Bounded, and the list scrolls inside it.
+
+        `max-h-[80svh]` on the dialog and `min-h-0 overflow-y-auto` on the list. Both are needed: a
+        flex child will not shrink below its content without `min-h-0`, so the list pushes the dialog
+        taller than the screen and the overflow never engages — which is what happened here. There are
+        twenty-odd carousels now and the list ran off the bottom of the window with no way to reach the
+        end of it.
+
+        `svh` rather than `vh` because on a phone `vh` is the viewport with the browser chrome hidden,
+        so a dialog sized in it is taller than what you can actually see.
+      */}
+      <DialogContent className="flex max-h-[80svh] flex-col sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>Choose a carousel</DialogTitle>
         </DialogHeader>
@@ -92,7 +104,7 @@ export const CarouselPicker = ({
           </p>
         )}
 
-        <div className="flex flex-col gap-1.5">
+        <div className="-mr-2 flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto pr-2">
           {carousels?.map((carousel) => {
             const count = Array.isArray(carousel.items) ? carousel.items.length : 0;
             const current = carousel.id === selected;