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

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

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