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

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>

frontend/src/index.css

@@ -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(
+    background: var(--header-gutter-bg);
-        to bottom,
+    background-attachment: fixed;
-        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;
   }
 }
 
@@ -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);