Commit 74dfbb697235b0db87355d3f8575dc2ba45dddf7 | the-knife

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

1 files changed, 3 insertions(+), 1 deletions(-)

apps/web/src/components/chat/ComposerBanner.tsx+3-1

 @@ -201,7 +201,9 @@ function Row({
       "not-has-[>[data-slot=composer-banner-actions]]:grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)]",
       "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-md [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
       // Actions share the title row while the title fits and move below it otherwise.
-      layout === "wrap-actions" && "flex flex-wrap *:data-[slot=composer-banner-content]:grow",
+      // The content's max width keeps it beside the icon, so a long title truncates instead of wrapping.
+      layout === "wrap-actions" &&
+        "flex flex-wrap *:data-[slot=composer-banner-content]:max-w-[calc(100%-var(--composer-banner-icon-column)-var(--spacing))] *:data-[slot=composer-banner-content]:grow",
       layout === "approval" && "items-start gap-x-2 gap-y-3",
       className,
     ),