From aa2f4aacc67ed2003ed08bbc3a6fdb7ddcad9496 Mon Sep 17 00:00:00 2001
From: mAi <mai@flexsiebels.de>
Date: Mon, 25 May 2026 16:01:15 +0200
Subject: [PATCH] mAi: #98 - move Auto-rule resolved name to its own row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Auto-mode resolved rule name was rendered as an inline-flex pill
that sat visually crammed next to the [Eigene Regel eingeben] toggle.
Promote .rule-mode-auto to a full-width block-level flex row (width:
100%, margin-top: 0.35rem) so it sits cleanly on its own line beneath
the toggle, and render the rule label via the canonical
formatRuleLabelHTML helper so the citation gets the muted-secondary
styling from rule-label.ts.

Applies to both /deadlines/new and /deadlines/:id edit form. Custom
mode (free-text input) is unaffected — the input already filled the
column.

Refs: m/paliad#98 (t-paliad-267), addendum to t-paliad-258 / m/paliad#89.
---
 frontend/src/client/deadlines-detail.ts |  3 ++-
 frontend/src/client/deadlines-new.ts    |  5 +++--
 frontend/src/styles/global.css          | 14 +++++++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/client/deadlines-detail.ts b/frontend/src/client/deadlines-detail.ts
index 3dbbe72..7f196fd 100644
--- a/frontend/src/client/deadlines-detail.ts
+++ b/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;
   }
diff --git a/frontend/src/client/deadlines-new.ts b/frontend/src/client/deadlines-new.ts
index 1be3932..d310d6f 100644
--- a/frontend/src/client/deadlines-new.ts
+++ b/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;
   }
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index d68e4fa..1cadc89 100644
--- a/frontend/src/styles/global.css
+++ b/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);