[One Workflow] Fix Actions menu row layout after EUI 116 upgrade

[Kiryous]

Closes https://github.com/elastic/security-team/issues/17599

Summary

EUI 116 (#260949) routes EuiSelectableListItem through the shared EuiListItemLayout (EUI #9532). The new layout (a) adds padding-block: 6px on .euiSelectableListItem__text and gap: 8px on .euiSelectableListItem__content, (b) drops the between-row border-bottom that EUI 114/115 set on every non-last item, and (c) shrinks the .euiSelectableList__groupLabel horizontal padding from 12px to 4px.

renderActionOption in the workflows Actions menu builds a custom icon + title + subtitle layout and owns its own spacing, so the new padding/gap stacked on top — rows grew from ~64 px to 76 px and the subtitle shifted. The dropped row border also broke the divider lines the design relies on, and the group label / header no longer sat on the same left edge as the items.

The fix scopes a few CSS overrides to the menu's EuiSelectable:

• __content { gap: 0 }
• __text { padding-block: 0 }
• .euiSelectableListItem:not(:last-of-type) { border-bottom: thin } — restores the row divider
• .euiSelectableList__groupLabel { padding-inline: 16px } — aligns "Add step" with the icon column
• header { padding-inline: 16px } (was padding: 12px) — aligns the popover title and search with the items

Also gated the "Add step" group label on having at least one matching action, so searches with no step matches no longer leave an orphan label (matching the existing behavior of the Commands and Jump-to-a-step groups, per designer feedback).

After the fix, "Actions menu" title, search input, "Add step" label, and item icons all sit at the same x = 16 from the popover edge — matching the Figma design. Item height settles at 65 px with 1 px row borders.

Before / after

Current main (bug)	With fix

Empty search state

When a search has no matching steps, EuiSelectable's "doesn't match any options" message shows instead of an orphan "Add step" label:

Test plan

• Open the workflows YAML editor, press ⌘K, confirm rows are tight (~65 px), divider lines visible between items, subtitle sits directly under the title next to the icon
• Confirm title, search input, "Add step" label, and item icons all sit at the same left edge
• Click into a connector group (e.g. Triggers) — nested view renders the same way with dividers
• Type Steps: to enter the virtualized full-catalog mode — items render correctly without overlapping
• Type a query that doesn't match any step — confirm no orphan "Add step" label
• No regression in the existing ActionsMenu Jest tests

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 3a2999e
• Build duration: 64 mins

Failed CI Steps

• FTR Configs #56
• FTR Configs #106
• Scout Lane #2 - stateful-classic / default
• Scout Lane #8 - stateful-classic / default

Test Failures

• [job] [logs] FTR Configs #106 / Cloud Security Posture - Group 5 (KSPM + Flyouts) Security Alerts Page - Graph visualization expanded flyout - filter by node
• [job] [logs] Scout Lane #2 - stateful-classic / default / local-stateful-classic - Query streams - Delete query stream - should support deleting an existing query stream
• [job] [logs] Scout Lane #8 - stateful-classic / default / local-stateful-classic - UptimeIntegrationDeprecation - returns true when non-managed synthetics policies exist

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
workflowsManagement	2.5MB	2.5MB	+246.0B

History

• 💛 Build #449584 was flaky 7e09862
• 💛 Build #449433 was flaky 303a78b

cc @Kiryous

[talboren]

LGTM

[kibanamachine]

Starting backport for target branches: 9.4

https://github.com/elastic/kibana/actions/runs/26708107311

[kibanamachine]

💔 All backports failed

Status	Branch	Result
❌	9.4	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 271409

Questions ?

Please refer to the Backport tool documentation