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

fix(ui): no white strip next to the page in Chrome

Browse Source 
Chrome paints an empty scrollbar gutter white and takes the page
scrollbar's style from body, not html. It now always shows the page
scrollbar (an empty track where nothing scrolls), styled via
body::-webkit-scrollbar with the header and page colours; the header's
translucent bottom line is a layer of its own. Firefox keeps the gutter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 18:45:18 +01:00
1 parent 9473e2321a
commit e4bc6ead61
1 file changed
+37 -8
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+37 -8
View File
@@ -35,19 +35,36 @@
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: linear-gradient(
to bottom,
var(--bg-panel) 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),
var(--bg-app) var(--app-header-h, 0px)
)
fixed;
background: var(--header-gutter-bg);
background-attachment: fixed;
}
}
@@ -69,6 +86,18 @@ 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);