chihlasm
5fa9c57c17
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>
27 lines
993 B
TypeScript
27 lines
993 B
TypeScript
import { Outlet, useLocation } from 'react-router-dom'
|
|
|
|
/**
|
|
* Wraps <Outlet> with a fade-in animation keyed to the route path.
|
|
* When the route changes, React unmounts/remounts the wrapper div,
|
|
* triggering the CSS animation. Sidebar and topbar stay still.
|
|
*
|
|
* Uses flex-1 + min-h-0 to fill the main content area exactly.
|
|
* overflow-y-auto enables scrolling for normal pages while full-height
|
|
* pages (tree editor, etc.) use their own overflow:hidden to take
|
|
* the exact container height without scrolling.
|
|
*/
|
|
export function ViewTransitionOutlet() {
|
|
const location = useLocation()
|
|
|
|
// Use the first two path segments as the key to avoid re-animating
|
|
// on param changes within the same page (e.g., /trees/123 → /trees/456)
|
|
const segments = location.pathname.split('/').filter(Boolean)
|
|
const routeKey = segments.slice(0, 2).join('/') || '/'
|
|
|
|
return (
|
|
<div key={routeKey} className="flex-1 min-h-0 flex flex-col animate-fade-in-up">
|
|
<Outlet />
|
|
</div>
|
|
)
|
|
}
|