From e205c444487639ae8ab241d25f201deab28acf3e Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Mon, 23 Mar 2026 12:09:05 +0000
Subject: [PATCH] fix: FlowPilot action bar single-row layout on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../flowpilot/FlowPilotActionBar.tsx          | 96 ++++++++++---------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
index aa98ff48..44f517ab 100644
--- a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
@@ -82,62 +82,64 @@ export function FlowPilotActionBar({
 
   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
-        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)' }}
       >
-        <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
-            onClick={() => { setShowResolve(true); setShowEscalate(false) }}
-            disabled={!canResolve || 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"
+            onClick={() => setShowStatusUpdate(true)}
+            disabled={isProcessing}
+            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} />
-            Resolve
+            <FileText size={15} />
+            <span className="hidden sm:inline">Share Update</span>
           </button>
+        )}
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Secondary actions — right side */}
+        {onPause && (
           <button
-            onClick={() => setShowEscalate(true)}
-            disabled={!canEscalate || isProcessing}
-            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"
+            onClick={handlePause}
+            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"
           >
-            <ArrowUpRight size={16} />
-            Escalate
+            <Pause size={15} />
+            <span className="hidden sm:inline">Pause</span>
           </button>
-          {canShareUpdate && onGenerateStatusUpdate && (
-            <button
-              onClick={() => setShowStatusUpdate(true)}
-              disabled={isProcessing}
-              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"
-            >
-              <FileText size={16} />
-              <span className="hidden sm:inline">Share Update</span>
-              <span className="sm:hidden">Update</span>
-            </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>
+        )}
+        {onAbandon && (
+          <button
+            onClick={() => setShowAbandon(true)}
+            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"
+          >
+            <X size={15} />
+            <span className="hidden sm:inline">Close</span>
+          </button>
+        )}
       </div>
 
       {/* Resolve modal */}