diff --git a/frontend/src/index.css b/frontend/src/index.css
index 588541a8..4cc2cfc4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -88,10 +88,13 @@
 }
 
 .sidebar {
+  min-height: 0;
   overflow-y: auto;
 }
 
 .main-content {
+  min-height: 0;
+  min-width: 0;
   overflow-y: auto;
 }
 
diff --git a/frontend/src/pages/ProceduralNavigationPage.tsx b/frontend/src/pages/ProceduralNavigationPage.tsx
index a6b100b4..f153b52c 100644
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/frontend/src/pages/ProceduralNavigationPage.tsx
@@ -340,7 +340,7 @@ export function ProceduralNavigationPage() {
   const currentStepState = currentStep ? stepStates.get(currentStep.id) : undefined
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
       {/* Top bar */}
       <div className="border-b border-border px-4 py-3 sm:px-6">
         <div className="flex items-center justify-between gap-4">
@@ -366,7 +366,7 @@ export function ProceduralNavigationPage() {
       </div>
 
       {/* Main content */}
-      <div className="flex min-h-0 flex-1">
+      <div className="flex min-h-0 flex-1 overflow-hidden">
         {/* Left sidebar - step checklist */}
         <div
           className={cn(
@@ -400,7 +400,7 @@ export function ProceduralNavigationPage() {
         </div>
 
         {/* Right panel - step detail */}
-        <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-6">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain p-4 sm:p-6">
           {currentStep && (
             <StepDetail
               step={currentStep}