Let a page taller than the window be read

Every screen built on PageShell was cut off at the fold with no scrollbar to say so. The templates
gallery is 5763px of content in a 900px viewport; the template's own reading page is 6546px, of which
four of fourteen sections could be reached. Skills was doing it too, quietly, at 1376px.

The two layouts that host these screens disagree about who scrolls, and PageShell answered for
neither. `_app.tsx` is `h-svh overflow-hidden` and says in its own comment that panes scroll inside
it, so a pane providing no scroller is simply clipped. `admin` is ordinary flow, where the document
scrolls and a pane needs to do nothing. Both worked until a page got tall, and the feature that made
pages tall was this one: a catalogue of twenty-seven, and a reading page that shows a stranger's
prose in full rather than through a twelve-line porthole.

PageShell now owns the pane scroller, which satisfies both hosts. Under `_app` it is the flex child
that fills the viewport and scrolls inside it. Under `admin` nothing constrains its height, so
`overflow-y-auto` never engages and the document scrolls as it always did.

`min-h-0` is the load-bearing half and the easiest to drop: a flex child defaults to
`min-height: auto`, refuses to shrink below its content, and hands the overflow straight back to the
parent that has already hidden it.

Measured on every PageShell screen rather than eyeballed on one.

Author: jerelvelarde

app/src/components/layout/page-shell.tsx

@@ -57,7 +57,26 @@ export function PageShell({
   };
 }) {
   return (
-    <>
+    /*
+     * THE PANE'S OWN SCROLLER, and without it this component cannot show a long page.
+     *
+     * The two layouts that host these screens disagree about who scrolls, and PageShell used to
+     * answer for neither. `_app.tsx` is `h-svh overflow-hidden` and says so in its own comment —
+     * "one viewport, never scrolls: panes scroll inside it" — so a pane that provides no scroller
+     * is simply cut off at the fold, silently, with no scrollbar to suggest anything is missing.
+     * `admin` is ordinary flow, where the document scrolls and a pane needs to do nothing.
+     *
+     * This satisfies both. Under `_app` it is the flex child that fills the viewport and scrolls
+     * inside it; under `admin` nothing constrains its height, so `overflow-y-auto` never engages
+     * and the document scrolls as before. `min-h-0` is the part that is easy to drop and is
+     * load-bearing: a flex child defaults to `min-height: auto`, which refuses to shrink below its
+     * content and hands the overflow back to a parent that has already hidden it.
+     *
+     * Measured rather than eyeballed, because this failed quietly: the templates gallery was 5763px
+     * of content in a 900px viewport and the template reading page 6546px, with four of its fourteen
+     * sections reachable and no scrollbar anywhere.
+     */
+    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
       {!!backButton && (
         <div className="max-w-7xl w-full h-14 flex items-center px-3">
           <Button
@@ -90,7 +109,7 @@ export function PageShell({
         </header>
         {children}
       </div>
-    </>
+    </div>
   );
 }