style(ui): header colour runs into the scrollbar gutter

The reserved gutter showed the page colour next to the header. On the
desktop the page background now carries the header colour and its
bottom line down to the header's measured height (--app-header-h),
fixed like the sticky header.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -205,6 +205,22 @@ export const App: React.FC = () => {
   // Profile Dropdown State
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const connection = useConnectionState();
+
+  // Height of the app header as --app-header-h: the page background paints the header colour up to there,
+  // so the scrollbar gutter on the right continues the header instead of showing the page colour
+  const [headerEl, setHeaderEl] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    if (!headerEl || typeof ResizeObserver === 'undefined') return;
+    const root = document.documentElement;
+    const update = () => root.style.setProperty('--app-header-h', `${headerEl.offsetHeight}px`);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(headerEl);
+    return () => {
+      observer.disconnect();
+      root.style.removeProperty('--app-header-h');
+    };
+  }, [headerEl]);
   const [showAbout, setShowAbout] = useState(false);
   const [showTriageTrash, setShowTriageTrash] = useState(false);
   const { update: availableUpdate, dismiss: dismissUpdate } = useUpdateCheck();
@@ -909,7 +925,10 @@ export const App: React.FC = () => {
       }`}
     >
       {/* Top Header Bar: Floating on mobile, solid panel on desktop */}
-      <header className="sticky top-0 z-30 bg-canvas/85 backdrop-blur-md sm:bg-panel sm:border-b sm:border-border sm:shadow-sm">
+      <header
+        ref={setHeaderEl}
+        className="sticky top-0 z-30 bg-canvas/85 backdrop-blur-md sm:bg-panel sm:border-b sm:border-border sm:shadow-sm"
+      >
         {/* Mobile Header: Floating Bar with Logo Action Dropdown Left & Profile Avatar Right */}
         <div className="sm:hidden flex items-center justify-between h-14 px-4 pt-1">
           <button

frontend/src/index.css

@@ -35,6 +35,21 @@
 html {
   scrollbar-gutter: stable;
 }
+/* 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;
+  }
+}
 
 body {
   background-color: var(--bg-app);