Simone/local-ci-cd-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): align maintenance number input with its buttons

Browse Source 
The Maintenance forms inherit the global block-`form` flex row, so the
max-age field and the button row are siblings on one line. Flex centring
uses each item's margin box, so the field's 0.5rem bottom margin lifted the
number input and its stepper arrows ~4px above the buttons' centre line, and
the global `form` top margin offset the whole control block inside the row.
Zero both; the stale comment claiming the field sits on its own row is
replaced by what actually renders.
This commit is contained in:
Simone
2026-07-25 14:28:56 +02:00
parent 7218c9b4a2
commit 197719990d
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ci_orchestrator/web/static/app.css
+8 -5
View File
@@ -268,11 +268,14 @@ dd code, dd .mono { overflow-wrap: anywhere; }
.maintenance-op-info { flex: 1 1 320px; min-width: 0; }
.maintenance-op h3 { font-size: 0.95rem; margin: 0 0 0.15rem; }
.maintenance-op .field-hint { margin: 0; }
.maintenance-op form { flex: none; }
/* The max-age control sits on its own row above the action buttons, so it
* reads as a general max-age parameter of the operation (not part of a
* button). */
.op-field { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
/* The form inherits the global block-``form`` flex row, so its max-age field
* and its button row are laid out as siblings on one line (wrapping only when
* the card is narrow). Both the global ``margin-top`` and any bottom margin on
* the field must be zeroed here: flex centring uses each item's *margin* box,
* so a 0.5rem bottom margin on the field lifts the number input (and its
* stepper arrows) half that above the buttons' centre line. */
.maintenance-op form { flex: none; margin-top: 0; }
.op-field { display: flex; align-items: center; gap: 0.5rem; }
.op-field label { font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; }
.op-field input { width: 6rem; }
/* A row of buttons (e.g. Purge / Empty all) that wraps on narrow cards. */