fix(layout): add flex flex-col to ViewTransitionOutlet — fixes action bar visibility

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>
This commit is contained in:
2026-03-20 05:29:33 +00:00
parent 0d1d8218b9
commit 5fa9c57c17
2 changed files with 3 additions and 3 deletions

View File

@@ -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>
)

View File

@@ -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}