diff --git a/CHANGELOG.md b/CHANGELOG.md index f0180f3..65b3acb 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/controller/internal/web/dashboard_layout_test.go b/controller/internal/web/dashboard_layout_test.go index cea4e63..866464a 100644 --- a/controller/internal/web/dashboard_layout_test.go +++ b/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() { diff --git a/controller/internal/web/templates/style.css b/controller/internal/web/templates/style.css index c9f71cf..c7e3db0 100644 --- a/controller/internal/web/templates/style.css +++ b/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; }