mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

Services, Docker and Cron fill the window when nothing is selected

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-20 20:08:09 -07:00
co-authored by Claude Opus 5
parent 04dd98e2cd
commit b8eb4f5d40
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+9 -1
View File
@@ -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. */ What is meant to give way (.logs, .stack-editor) says so itself, further down. */
.svc-detail > *, .cron-detail > * { flex-shrink: 0; } .svc-detail > *, .cron-detail > * { flex-shrink: 0; }
.svc-detail .back { display: none; align-self: flex-start; } .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-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; } .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; } .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; } .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 { 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; } .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-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; } .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; } .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; }