cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(server-detail): grow inspection-strip tabs; pin console input above scrollable transcript

Browse source 
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>
This commit is contained in:
mwiegand 2026-05-17 21:43:54 +02:00
parent 70b80d4ceb
commit eabb9764b9
No known key found for this signature in database
1 changed files with 37 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
l4d2web/l4d2web/static/css/components.css
View file

@ -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;
}