From eabb9764b9e735bdb2fd2391ef6b5a2e107f44ae Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sun, 17 May 2026 21:43:54 +0200
Subject: [PATCH] style(server-detail): grow inspection-strip tabs; pin console
 input above scrollable transcript
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tab padding: --space-xs → --space-s (vertical, 2×) and --space-m → calc(--space-m * 1.5) (horizontal, +50%), plus font-size: 1.05em. strip-expand bumped from --space-xs/--space-s to --space-s/--space-m proportionally. Console panes (inline tab-pane and modal body) are now flex columns so the transcript scrolls and the input form stays pinned at the bottom; max-height: none overrides the global 400px cap in both scopes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 l4d2web/l4d2web/static/css/components.css | 39 +++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/l4d2web/l4d2web/static/css/components.css b/l4d2web/l4d2web/static/css/components.css
index 2c588ee..6b9971e 100644
--- a/l4d2web/l4d2web/static/css/components.css
+++ b/l4d2web/l4d2web/static/css/components.css
@@ -1014,10 +1014,11 @@ div.modal.modal-wide {
 .tab-bar [role="tab"] {
   background: transparent;
   border: 0;
-  padding: var(--space-xs) var(--space-m);
+  padding: var(--space-s) calc(var(--space-m) * 1.5);
   color: var(--color-muted);
   cursor: pointer;
   font: inherit;
+  font-size: 1.05em;
   border-bottom: 2px solid transparent;
 }
 .tab-bar [role="tab"][aria-selected="true"] {
@@ -1028,7 +1029,7 @@ div.modal.modal-wide {
   margin-left: auto;
   background: transparent;
   border: 0;
-  padding: var(--space-xs) var(--space-s);
+  padding: var(--space-s) var(--space-m);
   color: var(--color-muted);
   cursor: pointer;
 }
@@ -1042,6 +1043,24 @@ 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"] {
+  display: flex;
+  flex-direction: column;
+  /* inherits max-height: 12rem from .tab-pane */
+  overflow: hidden; /* clip here; transcript scrolls internally */
+}
+.tab-pane[data-tab="console"] .console-transcript {
+  flex: 1 1 auto;
+  min-height: 0;       /* allow flex item to shrink below content size */
+  max-height: none;    /* override the global 400px cap — parent caps the area */
+  overflow: auto;
+  margin-bottom: var(--space-s); /* tighter gap inside fixed-height pane */
+}
+.tab-pane[data-tab="console"] .console-input-form {
+  flex: 0 0 auto;      /* never shrink the input row */
+}
+
 /* ============================================================
    RCON console panel — server detail page
    ============================================================ */
@@ -1140,3 +1159,19 @@ div.modal.modal-wide {
 .modal .console-transcript.tall {
   max-height: 60vh;
 }
+
+/* Console modal body — input pinned at bottom, transcript scrolls. */
+#console-modal .modal-body {
+  display: flex;
+  flex-direction: column;
+  max-height: 70vh;
+}
+#console-modal .modal-body .console-transcript {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;    /* override global 400px / .tall 60vh — modal-body caps it */
+  overflow: auto;
+}
+#console-modal .modal-body .console-input-form {
+  flex: 0 0 auto;
+}