Dashboard banners on a phone wrap inside the banner; the banner link takes the banner's colour

Seen on scratch 9202 with the R-906 build: once the real banner warnings showed (instead of an empty
overflow line), the link ran 90 px past a 390 px screen and rendered browser-default blue. Phone block:
.alert-banner wraps, .alert-message breaks long paths, .alert-link on its own line; .alert-link color: inherit.
Pinned in TestR907_PageHeaderWrapsOnAPhone (red against d5f2e47's CSS). No Hungarian string changed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012qRErfCoiTkvDK9N5XHbzb

CHANGELOG.md

@@ -21,6 +21,10 @@ changed; three Apps-page parity fixtures re-captured for the markup alone (below
   `baseData` and the monitoring page use it. `GetAlerts` is unchanged for the debug dump. Tests `TestR906_*` (the 9202
   case on /launcher, /stacks, /backups, /monitoring, hu and en: no overflow line, the hub-off banner shown; red with
   the two calls pointed back at `GetAlerts` — every page showed the overflow line and no warning).
+- **Banners, seen on 9202 once R-906 let the real ones through (small, fixed in the session):** on a phone a banner
+  now wraps (a long path breaks, the link drops to its own line inside the banner — the „Rendszermonitor" link ran
+  90 px past a 390 px screen), and `.alert-link` takes the banner's colour (it had none and rendered browser-default
+  blue, underlined). Pinned in `TestR907_PageHeaderWrapsOnAPhone` (red against d5f2e47's CSS).
 - **Parity fixtures re-captured, in their own commit:** `stacks_full`, `stacks_unhealthy_stop`,
   `stacks_install_interrupted`. Measured: each equals its predecessor with exactly the template change applied
   (wrapper `stack-title-text`, the address span + `title`, the `stack-tags` row) — byte-for-byte, 3 of 3 — and the

controller/internal/web/dashboard_layout_test.go

@@ -101,7 +101,8 @@ func TestStackCardHeaderLayout(t *testing.T) {
 // R-907 — on a phone the launcher's title, domain chip and share button sat on one row that does not wrap; the
 // button ran off the right edge (390 px, demo-hp 9201, 2026-10-08).
 //
-// RED-PROOF (REPORT): against 05e12921's style.css this fails — the 768px block has no .page-header rule.
+// RED-PROOF (REPORT): against 05e12921's style.css this fails — the 768px block has no .page-header rule, no
+// banner rule, and .alert-link has no colour.
 func TestR907_PageHeaderWrapsOnAPhone(t *testing.T) {
 	data, err := StyleCSS()
 	if err != nil {
@@ -114,6 +115,16 @@ func TestR907_PageHeaderWrapsOnAPhone(t *testing.T) {
 	if !regexp.MustCompile(`\.share-open-btn \{[^}]*white-space: nowrap`).MatchString(block) {
 		t.Error("the share button's text must stay whole when it drops to its own line")
 	}
+	// A banner on a phone: the long message breaks and the link wraps inside the banner (seen on 9202 once R-906
+	// let the real banners through: the link ran past the screen). And the link has a colour of its own.
+	for _, re := range []string{`\.alert-banner \{[^}]*flex-wrap: wrap`, `\.alert-message \{[^}]*min-width: 0[^}]*overflow-wrap: anywhere`, `\.alert-link \{[^}]*flex-basis: 100%`} {
+		if !regexp.MustCompile(re).MatchString(block) {
+			t.Errorf("the phone block lacks %s", re)
+		}
+	}
+	if r := cssRule(t, string(data), ".alert-link"); !strings.Contains(r, "color: inherit") {
+		t.Errorf(".alert-link must take the banner's colour, not the browser's link blue: %s", r)
+	}
 	// The button is still in the header it wraps inside, in both languages.
 	s := i18nTestServer(t)
 	for _, c := range i18nCases() {

controller/internal/web/templates/style.css

@@ -900,7 +900,9 @@ select.form-control option { background: var(--bg-2); color: var(--text-1); }
 }
 .alert-icon { flex-shrink: 0; }
 .alert-message { flex: 1; }
-.alert-link { margin-left: auto; white-space: nowrap; }
+/* The link takes the banner's own colour (it had none and rendered browser-default blue, 2026-10-08). */
+.alert-link { margin-left: auto; white-space: nowrap; color: inherit; text-decoration: none; }
+.alert-link:hover { text-decoration: underline; }
 
 /* Inline storage warnings (under storage bars on dashboard and monitoring) */
 .inline-warnings { margin-top: 0.75rem; }
@@ -2703,6 +2705,11 @@ a.stat-card:hover {
        launcher the share button drops to its own line. Pinned by TestR907_PageHeaderWrapsOnAPhone. */
     .page-header { flex-wrap: wrap; row-gap: .6rem; }
     .share-open-btn { margin-left: 0; white-space: nowrap; }
+    /* A banner wraps too: a long path breaks, and the link drops to its own line inside the banner (2026-10-08 —
+       on 9202 the „Rendszermonitor" link ran 90 px past a 390 px screen). Pinned by TestR907_PageHeaderWrapsOnAPhone. */
+    .alert-banner { flex-wrap: wrap; }
+    .alert-message { min-width: 0; overflow-wrap: anywhere; }
+    .alert-link { flex-basis: 100%; text-align: right; }
     .stats-grid { grid-template-columns: repeat(3, 1fr); }
     .deploy-info { flex-direction: column; }
     .system-info-items { flex-direction: column; gap: 1rem; }