From 5fa9c57c1789936005091ceffb49b635ea6471ce Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Fri, 20 Mar 2026 05:29:33 +0000
Subject: [PATCH] =?UTF-8?q?fix(layout):=20add=20flex=20flex-col=20to=20Vie?=
 =?UTF-8?q?wTransitionOutlet=20=E2=80=94=20fixes=20action=20bar=20visibili?=
 =?UTF-8?q?ty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: ViewTransitionOutlet wrapping <Outlet> had flex-1 min-h-0 but
display:block (no flex flex-col). Child pages using h-full flex-col couldn't
resolve height against a block parent, so content overflowed and the
FlowPilot action bar (Resolve/Escalate/Pause) rendered below the viewport.

Fix: Add flex flex-col to the outlet wrapper so the full flex height chain
works: app-shell grid → main flex-col → outlet flex-col → page flex-col.

Also removed the h-0 workaround from FlowPilotSessionPage since this
addresses the actual root cause.

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

diff --git a/frontend/src/components/layout/ViewTransitionOutlet.tsx b/frontend/src/components/layout/ViewTransitionOutlet.tsx
index 5312a23a..3cd5e6e2 100644
--- a/frontend/src/components/layout/ViewTransitionOutlet.tsx
+++ b/frontend/src/components/layout/ViewTransitionOutlet.tsx
@@ -19,7 +19,7 @@ export function ViewTransitionOutlet() {
   const routeKey = segments.slice(0, 2).join('/') || '/'
 
   return (
-    <div key={routeKey} className="flex-1 min-h-0 animate-fade-in-up">
+    <div key={routeKey} className="flex-1 min-h-0 flex flex-col animate-fade-in-up">
       <Outlet />
     </div>
   )
diff --git a/frontend/src/pages/FlowPilotSessionPage.tsx b/frontend/src/pages/FlowPilotSessionPage.tsx
index d3d808b0..1e138719 100644
--- a/frontend/src/pages/FlowPilotSessionPage.tsx
+++ b/frontend/src/pages/FlowPilotSessionPage.tsx
@@ -160,8 +160,8 @@ export default function FlowPilotSessionPage() {
         </span>
       </div>
 
-      {/* Session content — flex-1 fills remaining height, min-h-0 allows shrinking */}
-      <div className="flex-1 min-h-0 flex flex-col h-0">
+      {/* Session content */}
+      <div className="flex-1 min-h-0 flex flex-col">
         <FlowPilotSession
           session={fp.session}
           allSteps={fp.allSteps}