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 <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 */} {/* Left: Diff summary */}
{!error && ( {!error && (
@@ -195,8 +195,6 @@ export function NextActionCard({
</button> </button>
)} )}
<div className="flex-1" />
{/* Run Setup or Try Again button */} {/* Run Setup or Try Again button */}
{failed && {failed &&
(needsSetup ? ( (needsSetup ? (
@@ -205,7 +203,7 @@ export function NextActionCard({
size="sm" size="sm"
onClick={handleRunSetup} onClick={handleRunSetup}
disabled={!attempt} disabled={!attempt}
className="text-sm" className="text-sm w-full sm:w-auto"
aria-label={t('attempt.runSetup')} aria-label={t('attempt.runSetup')}
> >
{t('attempt.runSetup')} {t('attempt.runSetup')}
@@ -217,7 +215,7 @@ export function NextActionCard({
size="sm" size="sm"
onClick={handleTryAgain} onClick={handleTryAgain}
disabled={!attempt?.task_id} disabled={!attempt?.task_id}
className="text-sm" className="text-sm w-full sm:w-auto"
aria-label={t('attempt.tryAgain')} aria-label={t('attempt.tryAgain')}
> >
{t('attempt.tryAgain')} {t('attempt.tryAgain')}
@@ -227,7 +225,7 @@ export function NextActionCard({
{/* Right: Icon buttons */} {/* Right: Icon buttons */}
{fileCount > 0 && ( {fileCount > 0 && (
<div className="flex items-center gap-1 shrink-0"> <div className="flex items-center gap-1 shrink-0 sm:ml-auto">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button