From 6ecf592c40ead8a9da03ca5ec7177ebbdb7322e0 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Thu, 6 Nov 2025 12:51:27 +0000
Subject: [PATCH] Done! The responsive overflow issue is fixed: (#1193)

**Changes made:**
1. Container now stacks vertically on mobile (`flex-col gap-2`), horizontally on `sm+` screens
2. Removed the spacer that was causing the overflow
3. Both "Run Setup" and "Try Again" buttons are full-width on mobile, auto-width on larger screens
4. Icon buttons push to the right on desktop with `sm:ml-auto`

The Try Again button will no longer overflow on small screens.
---
 .../NormalizedConversation/NextActionCard.tsx          | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/NormalizedConversation/NextActionCard.tsx b/frontend/src/components/NormalizedConversation/NextActionCard.tsx
index 884d8847..9b59056f 100644
--- a/frontend/src/components/NormalizedConversation/NextActionCard.tsx
+++ b/frontend/src/components/NormalizedConversation/NextActionCard.tsx
@@ -176,7 +176,7 @@ export function NextActionCard({
         )}
 
         <div
-          className={`border px-3 py-2 flex items-center gap-3 min-w-0 ${failed ? 'border-destructive' : 'border-foreground'} ${needsSetup && setupHelpText ? 'border-t-0' : ''}`}
+          className={`border px-3 py-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 min-w-0 ${failed ? 'border-destructive' : 'border-foreground'} ${needsSetup && setupHelpText ? 'border-t-0' : ''}`}
         >
           {/* Left: Diff summary */}
           {!error && (
@@ -195,8 +195,6 @@ export function NextActionCard({
             </button>
           )}
 
-          <div className="flex-1" />
-
           {/* Run Setup or Try Again button */}
           {failed &&
             (needsSetup ? (
@@ -205,7 +203,7 @@ export function NextActionCard({
                 size="sm"
                 onClick={handleRunSetup}
                 disabled={!attempt}
-                className="text-sm"
+                className="text-sm w-full sm:w-auto"
                 aria-label={t('attempt.runSetup')}
               >
                 {t('attempt.runSetup')}
@@ -217,7 +215,7 @@ export function NextActionCard({
                   size="sm"
                   onClick={handleTryAgain}
                   disabled={!attempt?.task_id}
-                  className="text-sm"
+                  className="text-sm w-full sm:w-auto"
                   aria-label={t('attempt.tryAgain')}
                 >
                   {t('attempt.tryAgain')}
@@ -227,7 +225,7 @@ export function NextActionCard({
 
           {/* Right: Icon buttons */}
           {fileCount > 0 && (
-            <div className="flex items-center gap-1 shrink-0">
+            <div className="flex items-center gap-1 shrink-0 sm:ml-auto">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button