From b8eb4f5d4077523520f7522b2900f9cb30e4efd0 Mon Sep 17 00:00:00 2001 From: Mitchell-Johnson Date: Sun, 20 Sep 2026 20:08:09 -0700 Subject: [PATCH] Services, Docker and Cron fill the window when nothing is selected Co-Authored-By: Claude Opus 5 --- web/src/styles.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/web/src/styles.css b/web/src/styles.css index b16231c..67090d5 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -149,6 +149,14 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi What is meant to give way (.logs, .stack-editor) says so itself, further down. */ .svc-detail > *, .cron-detail > * { flex-shrink: 0; } .svc-detail .back { display: none; align-self: flex-start; } +/* Nothing selected: the list has the window to itself rather than a 360px column beside an + empty pane. The names, descriptions and commands that get an ellipsis are what it's for. + Picking something puts the list back at its own width, beside the detail. A phone shows one + pane at a time and is already full width — this is only for a window with room to waste. */ +@media (min-width: 801px) { + .svc:not(.has-sel) .svc-list, .cron:not(.has-sel) .cron-list { width: auto; flex: 1 1 auto; border-right: 0; } + .svc:not(.has-sel) .svc-empty, .cron:not(.has-sel) .svc-empty { display: none; } +} .svc-head { display: flex; align-items: center; gap: 10px; } .svc-head h2 { margin: 0; font-size: 18px; font-weight: 600; word-break: break-all; } .svc-actions { display: flex; flex-wrap: wrap; gap: 6px; } .props { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; font-size: 13px; } @@ -498,7 +506,7 @@ a.btn { text-decoration: none; display: inline-flex; align-items: center; } .docker .svc-state { text-align: right; line-height: 1.35; } .dtable { width: 100%; border-collapse: collapse; } .dtable th { text-align: left; padding: 8px 12px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; background: var(--bg2); } .dtable td { padding: 7px 12px; border-top: 1px solid var(--border); overflow-wrap: anywhere; } -.docker:not(.has-sel) .svc-list { flex: 1; width: auto; max-width: 760px; } +.docker:not(.has-sel) .svc-list { flex: 1; width: auto; } .docker .svc-tools .chips { flex-wrap: wrap; } .docker .svc-name { flex: 1; min-width: 0; } .docker .svc-name .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docker .svc-row { min-width: 0; } .docker .svc-state { flex-shrink: 0; } .alerts .row { display: flex; align-items: center; gap: 8px; } .alerts .row .badge { flex: 0 0 auto; } .alerts .row .k { flex: 1; min-width: 0; overflow-wrap: anywhere; }