From 74bc5a532d2080e210c8b7af5d35b54b59d52ea0 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 21 Mar 2026 17:49:49 -0400
Subject: [PATCH] fix(flowpilot): fix message bar hidden behind fixed action
 bar

The message bar was in normal document flow but the action bar uses
position:fixed at bottom:0, covering it. Now the message bar is also
fixed-positioned at bottom:60px (above the action bar), matching the
same left offset pattern. Added extra bottom padding to the
conversation column for clearance.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../flowpilot/FlowPilotMessageBar.tsx         | 61 +++++++++++--------
 .../components/flowpilot/FlowPilotSession.tsx |  4 +-
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
index efe2e480..8f8b2937 100644
--- a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
@@ -40,35 +40,44 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
   }, [])
 
   return (
-    <div className="px-3 sm:px-4 lg:px-5 pb-3">
-      <div className={cn(
-        'flex items-end gap-2 rounded-xl border bg-card p-2 transition-colors',
-        isDisabled
-          ? 'border-border/50 opacity-50'
-          : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
-      )}>
-        <textarea
-          ref={textareaRef}
-          value={message}
-          onChange={handleInput}
-          onKeyDown={handleKeyDown}
-          placeholder={isProcessing ? 'FlowPilot is thinking...' : 'Type a message...'}
-          disabled={isDisabled}
-          rows={1}
-          className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed py-1.5 px-2"
-        />
-        <button
-          onClick={handleSubmit}
-          disabled={isDisabled || !message.trim()}
+    <div
+      className="fixed bottom-[60px] right-0 z-40 px-3 sm:px-4 lg:px-5 pb-2"
+      style={{ left: 'var(--sidebar-w, 0px)' }}
+    >
+      <div className="mx-auto max-w-2xl lg:pr-72">
+        <div
           className={cn(
-            'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all',
-            message.trim() && !isDisabled
-              ? 'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97]'
-              : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground cursor-not-allowed'
+            'flex items-end gap-2 rounded-xl border p-2 transition-colors',
+            isDisabled
+              ? 'border-border/50 opacity-50'
+              : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
           )}
+          style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(16px)' }}
         >
-          <Send size={14} />
-        </button>
+          <textarea
+            ref={textareaRef}
+            value={message}
+            onChange={handleInput}
+            onKeyDown={handleKeyDown}
+            placeholder={isProcessing ? 'FlowPilot is thinking...' : 'Type a message...'}
+            disabled={isDisabled}
+            rows={1}
+            className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed py-1.5 px-2"
+          />
+          <button
+            onClick={handleSubmit}
+            disabled={isDisabled || !message.trim()}
+            aria-label="Send message"
+            className={cn(
+              'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all',
+              message.trim() && !isDisabled
+                ? 'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97]'
+                : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground cursor-not-allowed'
+            )}
+          >
+            <Send size={14} />
+          </button>
+        </div>
       </div>
     </div>
   )
diff --git a/frontend/src/components/flowpilot/FlowPilotSession.tsx b/frontend/src/components/flowpilot/FlowPilotSession.tsx
index 00cff8f9..02d0b39d 100644
--- a/frontend/src/components/flowpilot/FlowPilotSession.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotSession.tsx
@@ -194,8 +194,8 @@ export function FlowPilotSession({
 
       {/* Main content area: conversation + sidebar */}
       <div className="flex flex-1 min-h-0">
-        {/* Conversation column — pb-20 provides clearance for the fixed action bar */}
-        <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-20 sm:p-4 sm:pb-20 lg:p-6 lg:pb-20">
+        {/* Conversation column — pb-32 provides clearance for the fixed message bar + action bar */}
+        <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-32 sm:p-4 sm:pb-32 lg:p-6 lg:pb-32">
           <div className="mx-auto max-w-2xl space-y-3">
             {allSteps.map((step) => (
               <FlowPilotStepCard