Boards: column frame about three cards tall (700 px cap)

Co-Authored-By: Claude Fable 5.1 <[email protected]>

CHANGELOG.md

@@ -6,7 +6,7 @@ All notable changes to this project are recorded here. The format follows [Keep
 
 ### Fixed
 
-- Board columns are frames that fit the screen and scroll on their own, with the column heading staying put, so a long column no longer pushes the next one far down the page. Narrow screens keep the plain one-column flow.
+- Board columns are frames about three cards tall (700 px, never taller than the screen) that scroll on their own, with the column heading staying put, so a long column no longer pushes the next one far down the page. Narrow screens keep the plain one-column flow.
 - Sign-in refused as cross-origin in Firefox: the app sent `Referrer-Policy: no-referrer`, under which Firefox sends `Origin: null` on same-origin POSTs. The policy is now `same-origin`, which still sends nothing to other sites.
 
 ### Added

frontend/src/theme/theme.css

@@ -104,8 +104,8 @@ button.kpi:hover::after, button.kpi:focus-visible::after { opacity: 1; }
 .sec-h .ct { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
 .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
 .col { background: var(--col); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
-/* New: each column is a frame that fits the screen and scrolls on its own, so a long column never pushes the next one out of view. The heading stays put inside the frame. Narrow screens keep the plain flow (one column per row). */
+/* New: each column is a frame about three cards tall (--col-max) that scrolls on its own, so a long column never pushes the next one out of view. The heading stays put inside the frame. Narrow screens keep the plain flow (one column per row). */
-.col { max-height: calc(100vh - var(--toph, 64px) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.col { max-height: min(var(--col-max, 700px), calc(100vh - var(--toph, 64px) - 40px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
 .col-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-disp); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--near); }
 .col > .col-h { position: sticky; top: -12px; z-index: 1; background: var(--col); margin: -12px -12px 0; padding: 12px 12px 6px; border-bottom: 1px solid var(--line); }
 .col-h .c { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }