chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: FlowPilot action bar single-row layout on mobile

Browse Source 
Action bar was flex-col on mobile, creating two rows that covered the
message input. Now a single horizontal row on all screen sizes — Resolve
and Escalate always show labels, secondary actions (Pause, Close, Update)
show icon-only on mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-23 12:09:05 +00:00
parent 701ae7c7e7
commit e205c44448
1 changed files with 49 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/components/flowpilot/FlowPilotActionBar.tsx
View File

@@ -82,62 +82,64 @@ export function FlowPilotActionBar({
return ( return (
<> <>
{/* Bottom bar — fixed to viewport bottom, works regardless of height chain */} {/* Bottom bar — fixed to viewport bottom, single row on all screen sizes */}
<div <div
className="fixed bottom-0 right-0 z-40 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 border-t border-border bg-card px-3 py-3 sm:px-5" className="fixed bottom-0 right-0 z-40 flex items-center gap-1.5 sm:gap-3 border-t border-border bg-card px-2 sm:px-5 py-2 sm:py-3"
style={{ left: 'var(--sidebar-w, 0px)' }} style={{ left: 'var(--sidebar-w, 0px)' }}
> >
<div className="flex gap-2 sm:gap-3"> {/* Primary actions */}
<button
onClick={() => { setShowResolve(true); setShowEscalate(false) }}
disabled={!canResolve || isProcessing}
className="flex items-center justify-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<CheckCircle2 size={15} />
Resolve
</button>
<button
onClick={() => setShowEscalate(true)}
disabled={!canEscalate || isProcessing}
className="flex items-center justify-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<ArrowUpRight size={15} />
Escalate
</button>
{canShareUpdate && onGenerateStatusUpdate && (
<button <button
onClick={() => { setShowResolve(true); setShowEscalate(false) }} onClick={() => setShowStatusUpdate(true)}
disabled={!canResolve || isProcessing} disabled={isProcessing}
className="flex flex-1 sm:flex-initial items-center justify-center gap-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 min-h-[44px] text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors" className="flex items-center justify-center gap-1.5 rounded-lg bg-cyan-500/10 border border-cyan-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
title="Share Update"
> >
<CheckCircle2 size={16} /> <FileText size={15} />
Resolve <span className="hidden sm:inline">Share Update</span>
</button> </button>
)}
{/* Spacer */}
<div className="flex-1" />
{/* Secondary actions — right side */}
{onPause && (
<button <button
onClick={() => setShowEscalate(true)} onClick={handlePause}
disabled={!canEscalate || isProcessing} disabled={isProcessing || submitting}
className="flex flex-1 sm:flex-initial items-center justify-center gap-2 rounded-lg bg-amber-500/10 border border-amber-500/20 px-4 py-2 min-h-[44px] text-sm font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors" className="flex items-center justify-center gap-1.5 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
> >
<ArrowUpRight size={16} /> <Pause size={15} />
Escalate <span className="hidden sm:inline">Pause</span>
</button> </button>
{canShareUpdate && onGenerateStatusUpdate && ( )}
<button {onAbandon && (
onClick={() => setShowStatusUpdate(true)} <button
disabled={isProcessing} onClick={() => setShowAbandon(true)}
className="flex flex-1 sm:flex-initial items-center justify-center gap-2 rounded-lg bg-cyan-500/10 border border-cyan-500/20 px-4 py-2 min-h-[44px] text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors" disabled={isProcessing || submitting}
> className="flex items-center justify-center gap-1.5 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
<FileText size={16} /> >
<span className="hidden sm:inline">Share Update</span> <X size={15} />
<span className="sm:hidden">Update</span> <span className="hidden sm:inline">Close</span>
</button> </button>
)} )}
</div>
<div className="flex gap-2 sm:ml-auto">
{onPause && (
<button
onClick={handlePause}
disabled={isProcessing || submitting}
className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<Pause size={16} />
Pause
</button>
)}
{onAbandon && (
<button
onClick={() => setShowAbandon(true)}
disabled={isProcessing || submitting}
className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<X size={16} />
Close
</button>
)}
</div>
</div> </div>
{/* Resolve modal */} {/* Resolve modal */}