From fd62987df3a62d8c4aab0afcd15bf248e3799cb0 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 2 Nov 2026 18:26:45 +0100
Subject: [PATCH] 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   | 21 ++++++++++++++++++++-
 frontend/src/index.css | 15 +++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 36fad85..aa9439b 100644
--- a/frontend/src/App.tsx
+++ b/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
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5b7eed6..e52234d 100644
--- a/frontend/src/index.css
+++ b/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);