diff --git a/docker/frontend/src/Library.tsx b/docker/frontend/src/Library.tsx
index 42cded5..acccee5 100644
--- a/docker/frontend/src/Library.tsx
+++ b/docker/frontend/src/Library.tsx
@@ -217,7 +217,7 @@ export function Library() {
     );
 
   return (
-    <div className="adm">
+    <div className="adm lib-root">
       <header className="adm-bar">
         <a className="adm-brand" href="/">
           <img src="/assets/RecipesCamIcon.png" alt="" width="26" height="26" />
diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 0011692..6471ed1 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -994,6 +994,33 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
 .adm-danger { color: var(--danger); border-color: var(--border); }
 .adm-danger:hover:not(:disabled) { border-color: var(--danger); }
 
+/* The catalogue is one screen and never grows: the frame on the stage, the tree
+   beside it, and the strip pinned to the bottom edge. Whatever overflows scrolls
+   inside its own panel, so the page itself has no scrollbar to hide the strip
+   below the fold. Scoped to `.lib-root` — /admin shares the .adm-* blocks and
+   still scrolls as a page. */
+.lib-root { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-bottom: 12px; }
+.lib-root .adm-frame { flex: 1 1 auto; min-height: 0; }
+.lib-root .adm-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.lib-root .adm-note { flex: 0 0 auto; }
+/* The column: title and the folder's own chips stay put, the split takes what
+   is left, the strip keeps its natural height on the bottom. */
+.lib-root .adm-col { flex: 1 1 auto; min-height: 0; }
+.lib-root .adm-col > .adm-split { flex: 1 1 auto; min-height: 0; align-items: stretch; }
+.lib-root .adm-col > .adm-filmstrip { flex: 0 0 auto; }
+.lib-root .adm-album-list { max-height: none; flex: 1 1 auto; min-height: 0; }
+.lib-root .adm-stage { min-height: 0; overflow: hidden; }
+/* The frame fills the stage and the stage fits the window: `object-fit` letterboxes
+   it inside that box, so a 3:2 or a 4:3 frame stays whole and never pushes the
+   strip off screen. */
+.lib-root .adm-stage-img { flex: 1 1 auto; min-height: 0; width: 100%; aspect-ratio: auto; object-fit: contain; }
+.lib-root .adm-stage > .lib-noimg { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
+.lib-root .adm-stage > .adm-meta,
+.lib-root .adm-stage > .chip-row { flex: 0 0 auto; }
+/* All thumbs: the wall scrolls down inside the stage, and its own scrollbar on
+   the right edge is what reaches the frames below. */
+.lib-root .adm-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
+
 /* Settings drawer: the tabs that organise the page, plus the three panels. */
 /* The management frame: a bordered box whose left column is the menu and whose
    right side is the pane for the chosen section. */