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

A × closes a detail pane on a wide screen: Docker, Services, Cron

Browse Source 
On a phone the list gives way to the pane and Back returns; on a desktop the list stays
beside it and there was no way to put the pane away.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-22 19:52:35 -07:00
co-authored by Claude Fable 5.1
parent 027a2a575c
commit b8ea7abcc7
4 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+7 -1
View File
@@ -149,6 +149,12 @@ 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; }
/* The × that closes a detail pane on a wide screen, where the list stays beside it and there is
no Back. Sits in the pane's top-right corner; the header keeps clear of it. */
.svc-detail, .cron-detail { position: relative; }
.detail-close { position: absolute; top: 8px; right: 10px; z-index: 1; width: 28px; height: 28px; line-height: 28px; font-size: 20px; color: var(--muted); border-radius: 6px; }
.detail-close:hover { color: var(--fg); background: var(--bg3); }
.svc-detail > .svc-head, .cron-detail > h2 { padding-right: 36px; }
/* 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
@@ -174,7 +180,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.log.err .lm { color: var(--bad); } .log.warn .lm { color: var(--s2); } .log.debug .lm { color: var(--muted); }
@media (max-width: 800px) {
.svc-list { width: 100%; border-right: 0; } .has-sel .svc-list { display: none; } .svc-empty { display: none; }
.svc-detail .back { display: inline-block; } .props { grid-template-columns: 1fr; }
.svc-detail .back { display: inline-block; } .props { grid-template-columns: 1fr; } .detail-close { display: none; }
}
/* cron */