From ad7137ece85a0b0d560c423e9bbccd0f3672321f Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Fri, 17 Apr 2026 21:04:20 +0300
Subject: [PATCH] fix(automations): widen step-picker dropdown so labels don't
 wrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The add-step dropdown was inheriting its width from the "+" button
(≈32px), hitting the base Menu min-w-32 (128px) and wrapping every
multi-word label ("Send Message", "Update Contact Field", etc.).
Set min-w-56 and explicit align="start" so the list anchors to the
button's left edge and each label fits on one line.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/automations/automation-builder.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/automations/automation-builder.tsx b/src/components/automations/automation-builder.tsx
index 04d3a08..6deaa67 100644
--- a/src/components/automations/automation-builder.tsx
+++ b/src/components/automations/automation-builder.tsx
@@ -651,7 +651,10 @@ function AddButton({ onPick }: { onPick: (t: AutomationStepType) => void }) {
         >
           <Plus className="h-4 w-4" />
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="max-h-80 overflow-y-auto border-slate-700 bg-slate-900">
+        <DropdownMenuContent
+          align="start"
+          className="max-h-80 min-w-56 overflow-y-auto border-slate-700 bg-slate-900"
+        >
           {ADDABLE_STEPS.map((t) => {
             const Icon = STEP_META[t].icon
             return (