Merge: t-paliad-267 — Auto-rule resolved name on its own row in deadline form (m/paliad#98)

frontend/src/client/deadlines-detail.ts

@@ -465,7 +465,8 @@ function refreshRuleAutoDisplay(): void {
   panel.style.display = "";
   const r = currentAutoRule();
   if (r) {
-    text.textContent = formatRuleLabel(r);
+    // Canonical "Name · Citation" with muted citation (t-paliad-258 addendum).
+    text.innerHTML = formatRuleLabelHTML(r, esc);
     text.classList.remove("rule-auto-text--empty");
     return;
   }

frontend/src/client/deadlines-new.ts

@@ -8,7 +8,7 @@ import {
   type PickerHandle,
 } from "./event-types";
 import { projectIndent } from "./project-indent";
-import { formatRuleLabel } from "./rule-label";
+import { formatRuleLabel, formatRuleLabelHTML } from "./rule-label";
 
 let eventTypePicker: PickerHandle | null = null;
 let currentUserAdmin = false;
@@ -192,7 +192,8 @@ function refreshRuleAutoDisplay(): void {
   panel.style.display = "";
   const rule = currentAutoRule();
   if (rule) {
-    text.textContent = formatRuleLabel(rule);
+    // Canonical "Name · Citation" with muted citation (t-paliad-258 addendum).
+    text.innerHTML = formatRuleLabelHTML(rule, esc);
     text.classList.remove("rule-auto-text--empty");
     return;
   }

frontend/src/styles/global.css

@@ -7690,11 +7690,16 @@ dialog.modal::backdrop {
 /* t-paliad-258 — Auto/Custom Rule editor (m/paliad#89).
    Replaces the t-paliad-251 catalog dropdown + sort selector with a
    binary toggle:
-     .rule-mode-auto   — read-only display, lime-tint pill + label.
+     .rule-mode-auto   — read-only display, lime-tint chip + label.
      .rule-mode-custom — free-text input, full-width.
-   Toggle button reuses .btn-link-action for the inline link styling. */
+   Toggle button reuses .btn-link-action for the inline link styling.
+   t-paliad-267 / m/paliad#98 — the auto display is now a block-level
+   row of its own so the resolved rule name sits on its own line
+   beneath the toggle, not crammed beside it. Width is content-sized
+   (align-self:flex-start within form-field's block flow keeps the
+   chip from spanning the whole form column gratuitously). */
 .rule-mode-auto {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.45rem;
     padding: 0.35rem 0.55rem;
@@ -7702,6 +7707,9 @@ dialog.modal::backdrop {
     border-left: 2px solid var(--color-accent);
     border-radius: var(--radius-sm, 4px);
     min-height: 2rem;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 0.35rem;
 }
 .rule-auto-text {
     color: var(--color-text);