Boards: columns scroll inside a screen-high frame with a sticky heading

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

frontend/src/theme/theme.css

@@ -104,7 +104,10 @@ 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). */
+.col { max-height: 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); }
 .empty { border: 1px dashed var(--line2); border-radius: 10px; padding: 16px; color: var(--muted); font-size: 13.5px; text-align: center; }
 .empty.slim { padding: 12px 14px; }
@@ -230,6 +233,9 @@ td .sub { color: var(--muted); font-size: 12.5px; }
 
 /* Narrow screens. From the old @media (max-width:700px) and (max-width:640px) blocks. */
 @media (max-width: 700px) {
+  .col { max-height: none; overflow-y: visible; }
+  .col > .col-h { position: static; margin: 0; padding: 0; border-bottom: 0; }
+
   .tw table { min-width: 620px; }
   .tabs { top: 0; position: static; }
 }