fix(automation): keep a wrapped problem's bullet on its first line

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;

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