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