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.
This commit is contained in:
Louis Knight-Webb
2025-11-06 12:51:27 +00:00
committed by GitHub
parent 7123d7b3b5
commit 6ecf592c40

View File

@@ -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