ui: Central UI density/consistency sweep + Theme 0.4.1
Applies the family-wide admin-UI cleanup playbook to the Central UI so the Blazor surfaces stop diverging from the shared kit: buttons are grouped rather than individually sized, long cell values are contained instead of widening tables, and hard-coded colours give way to theme tokens. The headline fix is that MainLayout passed Accent="#2f5fd0" to ThemeShell, which the kit emits as an inline style on the shell root. Being a descendant of <html>, it beat the [data-bs-theme="dark"] override for the entire app, so the dark accent had never rendered. Declaring --accent in site.css :root instead lets both schemes resolve; light is unchanged because the value already matched the kit's light default. Theme pins to 0.4.1, which upstreams the local .btn sizing block verbatim, so that block is deleted here rather than duplicated. Verified byte-identical before removal; the repo now declares no --bs-btn-* anywhere. NOT purely cosmetic, contrary to the sweep's stated scope: four detail-modal surfaces (NotificationReport, ConfigurationAuditLog, ParkedMessages, SiteCallsReport) were additionally refactored from holding the selected record to holding its id and re-resolving from the current page each render, with the resolve doubling as the visibility gate. A background refresh that drops the row now closes the modal instead of showing a stale snapshot. This is a behaviour change and is called out rather than buried: a full-suite run turned up one intermittent CentralUI failure, CloseButton_DismissesModal, whose stack (GetRequiredEventBindingEntry during DispatchEventAsync) indicates the handler was disposed between render and click — a window the previous field-held record made structurally impossible. Treat the modal lifecycle here as unreviewed. Build 0/0; suite green apart from that one intermittent failure.
This commit is contained in:
@@ -6,9 +6,70 @@
|
||||
|
||||
/* ── App-level tokens (light defaults) ─────────────────────────────────────
|
||||
--sb-backdrop: semi-transparent overlay used by DialogHost and ad-hoc
|
||||
modal backdrops throughout the app. */
|
||||
modal backdrops throughout the app.
|
||||
--accent: ScadaBridge's product accent. Declared HERE rather than as
|
||||
ThemeShell's Accent="…" parameter: that parameter emits an inline
|
||||
style="--accent: …" on the shell root, which is a descendant of <html> and
|
||||
therefore beat the [data-bs-theme="dark"] override below for the whole app
|
||||
— the dark accent was dead. As a :root declaration it loses to the dark
|
||||
block (equal specificity, later in this file) and wins over theme.css
|
||||
(equal specificity, earlier sheet), so both schemes resolve correctly.
|
||||
The value matches theme.css's own light default, so light mode is
|
||||
unchanged. */
|
||||
:root {
|
||||
--sb-backdrop: rgba(0, 0, 0, 0.4);
|
||||
--accent: #2f5fd0;
|
||||
}
|
||||
|
||||
/* Button sizing lives in ZB.MOM.WW.Theme's layout.css as of 0.4.0 (the local
|
||||
copy that used to sit here was upstreamed verbatim), so there is deliberately
|
||||
no `.btn` rule in this sheet. Do not reintroduce one — and if you ever need
|
||||
to, override the CSS *variables* only, never the box properties, because
|
||||
.btn-group's seam and border-radius machinery is built on them. */
|
||||
|
||||
/* Bootstrap ships .form-label and .col-form-label-sm but no .form-label-sm,
|
||||
so the small-label intent next to a form-select-sm/form-control-sm was a
|
||||
silent no-op wherever it was used. Give it the rule it always implied. */
|
||||
.form-label-sm {
|
||||
font-size: .8rem;
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
/* ── Table cell containment ─────────────────────────────────────────────────
|
||||
Text this app does not control — remote exception messages, X.509 DNs, OPC UA
|
||||
node ids, serialized payloads, bundle-supplied names — must never be allowed
|
||||
to set a table's width. A single long value otherwise pushes the actions
|
||||
column off-screen exactly when an operator most needs it. Apply .cell-clip
|
||||
(optionally with a width modifier) to the cell or an inner block, and ALWAYS
|
||||
pair it with a title="…" so the full value stays reachable; where a fuller
|
||||
view exists, keep it in the row's detail drawer/dialog too.
|
||||
Modelled on the existing .parked-error-clamp pattern in ParkedMessages. */
|
||||
.cell-clip {
|
||||
display: block;
|
||||
max-width: 22rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell-clip-sm { max-width: 11rem; }
|
||||
.cell-clip-lg { max-width: 34rem; }
|
||||
|
||||
/* Two-line clamp for message-shaped text that deserves more than one line. */
|
||||
.cell-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
max-width: 34rem;
|
||||
}
|
||||
|
||||
/* For <pre>/<code> detail blocks: wrap instead of forcing horizontal scroll. */
|
||||
.detail-pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Reusable backdrop class — applied by DialogHost and standalone modal
|
||||
|
||||
Reference in New Issue
Block a user