From 9d202c67f25438a0025b20ca3fe37ae7ca28941e Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Fri, 20 Mar 2026 06:00:11 +0000
Subject: [PATCH] fix(flowpilot): make action bar fixed to viewport bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous approach tried to fix the flex height chain, but it proved fragile
across grid → main → outlet → page transitions. New approach: action bar is
position:fixed at the bottom of the viewport, offset by sidebar width via
CSS variable --sidebar-w. Conversation area has pb-20 for clearance.

This works regardless of the height chain, email verification banner,
or any other variable-height elements above the session.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/flowpilot/FlowPilotActionBar.tsx | 6 +++---
 frontend/src/components/flowpilot/FlowPilotSession.tsx   | 4 ++--
 frontend/src/pages/FlowPilotSessionPage.tsx              | 6 ++----
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
index 0e220721..0b8a2407 100644
--- a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
@@ -53,10 +53,10 @@ export function FlowPilotActionBar({
 
   return (
     <>
-      {/* Bottom bar */}
+      {/* Bottom bar — fixed to viewport bottom, works regardless of height chain */}
       <div
-        className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 border-t px-3 py-3 sm:px-5"
-        style={{ borderColor: 'var(--glass-border)', background: 'rgba(16, 17, 20, 0.8)', backdropFilter: 'blur(12px)' }}
+        className="fixed bottom-0 right-0 z-40 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 border-t px-3 py-3 sm:px-5"
+        style={{ borderColor: 'var(--glass-border)', background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(16px)', left: 'var(--sidebar-w, 0px)' }}
       >
         <div className="flex gap-2 sm:gap-3">
           <button
diff --git a/frontend/src/components/flowpilot/FlowPilotSession.tsx b/frontend/src/components/flowpilot/FlowPilotSession.tsx
index b97fc753..71f5896a 100644
--- a/frontend/src/components/flowpilot/FlowPilotSession.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotSession.tsx
@@ -193,8 +193,8 @@ export function FlowPilotSession({
 
       {/* Main content area: conversation + sidebar */}
       <div className="flex flex-1 min-h-0">
-        {/* Conversation column */}
-        <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 sm:p-4 lg:p-6">
+        {/* 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">
           <div className="mx-auto max-w-2xl space-y-3">
             {allSteps.map((step) => (
               <FlowPilotStepCard
diff --git a/frontend/src/pages/FlowPilotSessionPage.tsx b/frontend/src/pages/FlowPilotSessionPage.tsx
index db549cbd..1e138719 100644
--- a/frontend/src/pages/FlowPilotSessionPage.tsx
+++ b/frontend/src/pages/FlowPilotSessionPage.tsx
@@ -139,11 +139,9 @@ export default function FlowPilotSessionPage() {
     )
   }
 
-  // Active/completed session — use calc(100vh-56px) to match tree editor pattern
-  // (56px = topbar height). This bypasses the flex height chain which doesn't
-  // reliably propagate through the grid → main → outlet → page chain.
+  // Active/completed session
   return (
-    <div className="flex h-[calc(100vh-56px)] flex-col overflow-hidden">
+    <div className="flex h-full flex-col">
       {/* Header */}
       <div
         className="flex items-center gap-3 border-b px-5 py-3 shrink-0"