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

fix(flowpilot): fix message bar hidden behind fixed action bar

Browse Source 
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>
This commit is contained in:
Michael Chihlas
2026-03-21 17:49:49 -04:00
parent 928a22112a
commit 74bc5a532d
2 changed files with 37 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
View File

@@ -40,13 +40,20 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
}, []) }, [])
return ( return (
<div className="px-3 sm:px-4 lg:px-5 pb-3"> <div
<div className={cn( className="fixed bottom-[60px] right-0 z-40 px-3 sm:px-4 lg:px-5 pb-2"
'flex items-end gap-2 rounded-xl border bg-card p-2 transition-colors', style={{ left: 'var(--sidebar-w, 0px)' }}
>
<div className="mx-auto max-w-2xl lg:pr-72">
<div
className={cn(
'flex items-end gap-2 rounded-xl border p-2 transition-colors',
isDisabled isDisabled
? 'border-border/50 opacity-50' ? 'border-border/50 opacity-50'
: 'border-border focus-within:border-[rgba(6,182,212,0.3)]' : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
)}> )}
style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(16px)' }}
>
<textarea <textarea
ref={textareaRef} ref={textareaRef}
value={message} value={message}
@@ -60,6 +67,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
<button <button
onClick={handleSubmit} onClick={handleSubmit}
disabled={isDisabled || !message.trim()} disabled={isDisabled || !message.trim()}
aria-label="Send message"
className={cn( className={cn(
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all', 'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all',
message.trim() && !isDisabled message.trim() && !isDisabled
@@ -71,5 +79,6 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
</button> </button>
</div> </div>
</div> </div>
</div>
) )
} }

4
frontend/src/components/flowpilot/FlowPilotSession.tsx
View File

@@ -194,8 +194,8 @@ export function FlowPilotSession({
{/* Main content area: conversation + sidebar */} {/* Main content area: conversation + sidebar */}
<div className="flex flex-1 min-h-0"> <div className="flex flex-1 min-h-0">
{/* Conversation column — pb-20 provides clearance for the fixed action bar */} {/* 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-20 sm:p-4 sm:pb-20 lg:p-6 lg:pb-20"> <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"> <div className="mx-auto max-w-2xl space-y-3">
{allSteps.map((step) => ( {allSteps.map((step) => (
<FlowPilotStepCard <FlowPilotStepCard