the detail panels scroll

Four sections could not be scrolled: About, and Gallery, Drops and Collabs, which are three
configurations of one panel. Both of those panels were written yesterday with `overflow-auto` and no
height, so they grew to fit their content and ran off the bottom of the workspace instead of scrolling
inside it.

`overflow-auto` only does something on an element with a height to overflow. DetailPanel gives its
child `min-h-0 flex-1` inside a `size-full` column, so a panel that says `size-full` fills exactly that
box and scrolls within it — which is what Home, Galleries and Administration were already doing and
what these two were copied from without.

Messages had the same fault in a different shape. Its list is a flex child with `flex-1 overflow-auto`,
and a flex child defaults to `min-height: auto` — it refuses to shrink below its content, so the list
grew the panel rather than scrolling. `min-h-0` is what lets it shrink, and therefore what makes the
overflow mean anything.

Audited the rest rather than fixing the reported ones: every panel with an `overflow-auto` now pairs it
with a height, and the two that have none are centred single screens with nothing to scroll.

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

web/MessagesPanel.tsx

@@ -108,7 +108,10 @@ export const MessagesPanel = () => {
           <p className="text-sm text-muted-foreground">Nobody has used the contact form yet.</p>
         </div>
       ) : (
-        <ul className="flex-1 overflow-auto">
+        /* `min-h-0` is what makes this actually scroll. A flex child defaults to `min-height: auto`,
+           which refuses to shrink below its content — so `flex-1 overflow-auto` alone grows the list
+           and pushes it past the panel instead of scrolling inside it. */
+        <ul className="min-h-0 flex-1 overflow-auto">
           {messages.map((message) => (
             <li key={message.id} className="border-b border-border px-4 py-3">
               <div className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">

web/sections/AboutPanel.tsx

@@ -117,7 +117,7 @@ export const AboutPanel = () => {
   );
 
   return (
-    <div className="flex flex-col gap-4 overflow-auto p-4">
+    <div className="flex size-full flex-col gap-4 overflow-auto p-4">
       <p className="text-xs text-muted-foreground">
         The About page, in the order it is shown: a header, the text about you, the product, and the
         manifesto.

web/sections/RecordsPanel.tsx

@@ -209,7 +209,7 @@ export const RecordsPanel = ({ config }: { config: RecordsConfig }) => {
   const field = (key: string, value: string) => setDraft((current) => ({ ...current, [key]: value }));
 
   return (
-    <div className="flex flex-col gap-4 overflow-auto p-4">
+    <div className="flex size-full flex-col gap-4 overflow-auto p-4">
       <p className="text-xs text-muted-foreground">{config.blurb}</p>
 
       {/* The list, and the one field that makes another. A record is created with a title alone and