diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b96e79..563bfb8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/frontend/src/theme/theme.css b/frontend/src/theme/theme.css index 1fad04f..b0dd582 100644 --- a/frontend/src/theme/theme.css +++ b/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). */ -.col { max-height: calc(100vh - var(--toph, 64px) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } +/* 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: 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); }