From 177fdd4c9bef22e7de4be69b7a4daf94161f89ab Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 8 Mar 2026 13:34:20 -0400
Subject: [PATCH] fix: main-content flex layout for tree editor + scrollable
 pages

Main content area is now flex-col so the ViewTransitionOutlet wrapper
gets an explicit computed height via flex-1 min-h-0. This makes h-full
resolve correctly in the tree editor (React Flow canvas) while still
allowing overflow-y-auto scrolling for normal pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/AppLayout.tsx            | 2 +-
 frontend/src/components/layout/ViewTransitionOutlet.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 61c02c24..e8ba3bff 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -184,7 +184,7 @@ export function AppLayout() {
       )}
 
       {/* Main Content */}
-      <main className="main-content overflow-y-auto">
+      <main className="main-content flex flex-col overflow-hidden">
         <EmailVerificationBanner />
         <ViewTransitionOutlet />
       </main>
diff --git a/frontend/src/components/layout/ViewTransitionOutlet.tsx b/frontend/src/components/layout/ViewTransitionOutlet.tsx
index b6b234c6..f6d8f233 100644
--- a/frontend/src/components/layout/ViewTransitionOutlet.tsx
+++ b/frontend/src/components/layout/ViewTransitionOutlet.tsx
@@ -4,6 +4,11 @@ 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()
@@ -14,7 +19,7 @@ export function ViewTransitionOutlet() {
   const routeKey = segments.slice(0, 2).join('/') || '/'
 
   return (
-    <div key={routeKey} className="h-full animate-fade-in-up">
+    <div key={routeKey} className="flex-1 min-h-0 overflow-y-auto animate-fade-in-up">
       <Outlet />
     </div>
   )