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);