From a892ad1edb4f71ed6ab854e1c911e6cff0d58954 Mon Sep 17 00:00:00 2001
From: Tam Tran <tamtranthien@gmail.com>
Date: Mon, 7 Sep 2026 13:12:58 -0500
Subject: [PATCH] fix(automation): keep a wrapped problem's bullet on its first
 line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reported: the bullet for `Send to terminal — Add a terminal message or a
webhook destination.` drew beside `webhook destination.`, with the words
it belonged to sitting above it unmarked.

A `<button>` is `inline-block`, and an inline-block's baseline is the
baseline of its LAST line box. A problem long enough to wrap therefore
gave its `li` a single line box whose baseline sat on the second line,
and an outside list marker is placed on that baseline. The one-line
problem above it had no symptom, which is why only one of the two looked
wrong.

Block-level, so the button's first line IS the item's first line and the
marker has nowhere else to go. Full width is a bonus: the whole row
becomes the click target for the step it focuses.

Third instance of one family this week - `Re-arm now` riding high against
its pill, the info icon sitting low against its label, and now this - all
inline-level boxes aligned on a baseline that is not where it looks.

jsdom cannot lay this out, so it was checked by rendering the stylesheet's
own `.au-problems` rules in headless Edge, before and after, at a width
that forces the wrap. The test asserts the declaration that makes it true.
---
 .../Automation/AutomationEditor.css           | 15 ++++++++++++++
 .../__tests__/auInspectorChromeGaps.test.tsx  | 20 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/renderer/components/Automation/AutomationEditor.css b/src/renderer/components/Automation/AutomationEditor.css
index 719fe39..72f2eef 100644
--- a/src/renderer/components/Automation/AutomationEditor.css
+++ b/src/renderer/components/Automation/AutomationEditor.css
@@ -1095,7 +1095,22 @@
     color: #d9c08a;
 }
 
+/*
+ * `display: block`, and that is the fix for a bullet that appeared beside the LAST line of a
+ * problem rather than the first.
+ *
+ * A `<button>` is `inline-block`, and an inline-block's baseline is the baseline of its **last**
+ * line box. So a two-line problem gave the `li` a single line box whose baseline sat on the second
+ * line, and an outside marker is placed on that baseline — the bullet ended up next to `webhook
+ * destination.` while the words it belonged to sat above it, unmarked. A one-line problem has no
+ * symptom, which is why only the longer of the two looked wrong.
+ *
+ * As a block the button's first line IS the item's first line, so the marker has nowhere else to
+ * go. Full width is a bonus rather than a cost: the whole row becomes the click target for the
+ * step it focuses.
+ */
 .au-editor .au-problems li button {
+    display: block;
     padding: 0;
     text-align: left;
     color: inherit;
diff --git a/src/renderer/components/Automation/__tests__/auInspectorChromeGaps.test.tsx b/src/renderer/components/Automation/__tests__/auInspectorChromeGaps.test.tsx
index 8b455ef..34eb143 100644
--- a/src/renderer/components/Automation/__tests__/auInspectorChromeGaps.test.tsx
+++ b/src/renderer/components/Automation/__tests__/auInspectorChromeGaps.test.tsx
@@ -188,6 +188,26 @@ describe('the state pill and its re-arm button', () => {
     });
 });
 
+/**
+ * A third instance of the same family, and the one that gives the family its name: **an
+ * inline-block's baseline is its LAST line box.**
+ *
+ * A `<button>` is inline-block by default, so a problem long enough to wrap gave its `li` one line
+ * box whose baseline sat on the second line — and an outside list marker is placed on that
+ * baseline. The bullet drew beside `webhook destination.` with the words it belonged to sitting
+ * above it, unmarked. Only the longer of the two problems showed it.
+ *
+ * jsdom cannot lay this out, so the fix was checked by rendering the real stylesheet's own
+ * `.au-problems` rules in headless Edge, before and after, at a width that forces the wrap. What
+ * is asserted here is the declaration that makes it true — a block-level button has its first line
+ * as the item's first line, and the marker has nowhere else to go.
+ */
+describe('a problem long enough to wrap', () => {
+    it('keeps its bullet on the first line, the button being block-level', () => {
+        expect(ruleBody('.au-editor .au-problems li button')).toMatch(/display:\s*block/);
+    });
+});
+
 /**
  * The same alignment problem in the other place it appeared: a 15px icon beside 0.8rem uppercase
  * text, aligned on a baseline neither shares. The label centres its items rather than picking a