sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): desktop scrolls inside, under a fixed header

Browse Source 
On the desktop the window no longer scrolls: the area between header
and footer does, with room for its scrollbar kept on both sides so the
content stays centred and nothing shifts between pages. This replaces
the scrollbar-gutter tricks (header colour in the gutter, Chrome's
always-on scrollbar, which also let the sticky header scroll away in
Chrome). Triage fills the height: card and buttons stay, the queue takes
the rest and scrolls inside. The Kanban height fit and the Quick Dump
button use the scroll area. Phones keep scrolling the window.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 19:15:43 +01:00
1 parent c31eed5a3a
commit c7cff441a2
4 files changed
+48 -80
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/index.css
-51
View File
@@ -29,45 +29,6 @@
-webkit-tap-highlight-color: transparent;
}
/* Room for the scrollbar is always kept: pages that scroll (e.g. a wide Kanban board) and pages that do
not keep the same width, so nothing shifts when switching tabs. Overlay scrollbars (phones) are not
affected. */
html {
scrollbar-gutter: stable;
}
/* Chrome paints an empty gutter (page without scrollbar) plain white, ignoring the page background. There
the scrollbar is always shown instead: without anything to scroll it is an empty track, coloured like
the header and page by body::-webkit-scrollbar below. Firefox keeps the gutter, which it paints with the
html background. */
@supports selector(::-webkit-scrollbar) {
html {
overflow-y: scroll;
}
}
/* Header colour down to the header's height (--app-header-h, set by App), then the page colour. The header's
bottom line is its own layer on top, since the theme gives it as a translucent colour. Defined on body:
Chrome resolves variables for the page scrollbar from there (html sees it through inheritance too). */
:root,
body {
--header-gutter-bg: linear-gradient(
to bottom,
transparent calc(var(--app-header-h, 0px) - 1px),
var(--border-color) calc(var(--app-header-h, 0px) - 1px),
var(--border-color) var(--app-header-h, 0px),
transparent var(--app-header-h, 0px)
),
linear-gradient(to bottom, var(--bg-panel) var(--app-header-h, 0px), var(--bg-app) var(--app-header-h, 0px));
}
/* The gutter shows the page background; on the desktop it carries the header colour (and its bottom
line) down to the header's height (--app-header-h, set by App), fixed like the sticky header, so the
header seems to run to the window edge */
@media (min-width: 768px) {
html {
background: var(--header-gutter-bg);
background-attachment: fixed;
}
}
body {
background-color: var(--bg-app);
color: var(--text-main);
@@ -86,18 +47,6 @@ body {
background: transparent;
}
/* Chrome takes the page scrollbar's style from body (html:: does not apply) and paints white behind a
transparent track, where Firefox shows the html background: the page scrollbar gets the same
background as html above, on the desktop with the header colour on top */
body::-webkit-scrollbar {
background: var(--bg-app);
}
@media (min-width: 768px) {
body::-webkit-scrollbar {
background: var(--header-gutter-bg);
}
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--radius-btn);