From d14d79ce3b0446c87a6aee771f349674a64c39cd Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Tue, 9 Jun 2026 12:31:26 +0200
Subject: [PATCH] fix(frontend): give the server-warning bar an opaque
 background (#1572)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The server-warning rows composited their level tint (amber/red) over
`transparent`, so only 16-18% of the colour was opaque. Because the bar
is `position: sticky; top: 0`, page content scrolled up behind it showed
through the see-through background. Composite the tint over the elevated
surface grey (--bg-elev) instead, so the bar reads as a solid grey strip
with the level tint on top — no bleed-through. Affects every page that
shows the banner (the flow page is where it was spotted).
---
 frontend/packages/dashboard/src/common.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/dashboard/src/common.css b/frontend/packages/dashboard/src/common.css
index 5993c10a..47ec4c26 100644
--- a/frontend/packages/dashboard/src/common.css
+++ b/frontend/packages/dashboard/src/common.css
@@ -525,14 +525,17 @@ body.side-panel-resizing * { cursor: ew-resize !important; }
   font-weight: bold;
   letter-spacing: 0.02em;
 }
+/* Tint composited over the opaque elevated-surface grey (not transparent):
+   the bar is `position: sticky`, so a see-through background would let
+   page content scroll through behind it. */
 .server-warn-warn {
   color: var(--amber);
-  background: color-mix(in srgb, var(--amber) 16%, transparent);
+  background: color-mix(in srgb, var(--amber) 16%, var(--bg-elev));
   border-bottom: 1px solid var(--amber);
 }
 .server-warn-crit {
   color: var(--red);
-  background: color-mix(in srgb, var(--red) 18%, transparent);
+  background: color-mix(in srgb, var(--red) 18%, var(--bg-elev));
   border-bottom: 1px solid var(--red);
 }