From 36e4b6158122689f955e998ee029ad88924ddd07 Mon Sep 17 00:00:00 2001 From: mwiegand Date: Sun, 17 May 2026 21:50:01 +0200 Subject: [PATCH] fix(server-detail): scope console tab-pane flex to :not([hidden]) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The .tab-pane[data-tab="console"] flex rule added in eabb976 had equal specificity to .tab-pane[hidden] { display: none } and came later in the cascade, so the hidden console pane rendered display:flex right underneath the active log pane — the page showed both at once, doubling the inspection strip's height. Adding :not([hidden]) keeps the hidden rule winning when the tab is inactive. Co-Authored-By: Claude Opus 4.7 (1M context) --- l4d2web/l4d2web/static/css/components.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/l4d2web/l4d2web/static/css/components.css b/l4d2web/l4d2web/static/css/components.css index 6b9971e..d544a2a 100644 --- a/l4d2web/l4d2web/static/css/components.css +++ b/l4d2web/l4d2web/static/css/components.css @@ -1043,8 +1043,11 @@ div.modal.modal-wide { .tab-pane[hidden] { display: none; } .tab-pane .log-stream { max-height: none; } /* let pane handle scrolling */ -/* Console tab pane — input pinned at bottom, transcript scrolls. */ -.tab-pane[data-tab="console"] { +/* Console tab pane — input pinned at bottom, transcript scrolls. + :not([hidden]) keeps .tab-pane[hidden] { display: none } winning + when the tab is inactive (otherwise these rules would tie on + specificity and the later rule would defeat the hidden state). */ +.tab-pane[data-tab="console"]:not([hidden]) { display: flex; flex-direction: column; /* inherits max-height: 12rem from .tab-pane */