feat(centralui): ExecutionDetailModal — execution rows with per-row detail

2026-05-22 01:39:04 -04:00
parent 603995d43a
commit 386cd0b955
4 changed files with 609 additions and 0 deletions
@@ -0,0 +1,40 @@
+/* Execution-Tree Node Detail Modal (Task 3).
+   The modal/backdrop base classes come from Bootstrap; this is hand-rolled
+   (no bootstrap.bundle.js modal API), so the backdrop needs an explicit
+   stacking context and the dialog a comfortable max width. The per-row detail
+   body styles travel with AuditEventDetail.razor.css. */
+
+/* Bootstrap's .modal-backdrop sits below .modal by default; with the hand-
+   rolled approach we render both as siblings, so pin the dialog above it. */
+.execution-detail-modal {
+    z-index: 1055;
+}
+
+/* The audit detail body can carry larger JSON/SQL payloads — a slightly wider
+   dialog than the Bootstrap default keeps those readable. Clamp to the
+   viewport so narrow windows still get the close button on screen. */
+.execution-detail-modal .modal-dialog {
+    max-width: min(720px, 95vw);
+}
+
+/* Row-list buttons: a calm hover lift and a fixed-width status badge so the
+   Kind / Target columns align down the list. */
+.execution-detail-row-list .list-group-item-action {
+    cursor: pointer;
+}
+
+.execution-detail-status {
+    flex-shrink: 0;
+    min-width: 5.5rem;
+    text-align: center;
+}
+
+/* Keep the back-to-list affordance quiet — it is navigation chrome, not a
+   primary action. */
+.execution-detail-back-link {
+    text-decoration: none;
+}
+
+.execution-detail-back-link:hover {
+    text-decoration: underline;
+}