From d2fb252a98c1e6ff5bcebef545ce1afdd6764848 Mon Sep 17 00:00:00 2001
From: Kamil Krzywda <krzywda.kamil@gmail.com>
Date: Tue, 29 Sep 2026 08:21:14 +0000
Subject: [PATCH] =?UTF-8?q?feat(ui):=20only=20the=20middle=20column=20scro?=
 =?UTF-8?q?lls=20=E2=80=94=20side=20panes=20stay=20fixed=20(#21)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pin the wide layout to the viewport (height:100vh + overflow:hidden on the
root), add min-height:0 to the BODY wrapper and 3-column grid so the flex
chain actually constrains, and make the OPERATIONS panel a flex column whose
PanelContent is the scroll area (header stays pinned; the Panel root's default
overflow:hidden would otherwise clip). Columns' existing overflow-y:auto now
scrolls inside their tracks. Narrow mode keeps natural body flow.
---
 components/mission-control.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/mission-control.tsx b/components/mission-control.tsx
index 91f2234..a158956 100644
--- a/components/mission-control.tsx
+++ b/components/mission-control.tsx
@@ -107,6 +107,10 @@ export function MissionControl() {
     <div
       style={{
         minHeight: '100vh',
+        // Wide layout is pinned to the viewport so only the columns scroll internally (#21);
+        // narrow keeps natural flow with body scroll.
+        height: narrow ? undefined : '100vh',
+        overflow: narrow ? undefined : 'hidden',
         background: 'var(--background)',
         display: 'flex',
         flexDirection: 'column',
@@ -196,6 +200,7 @@ export function MissionControl() {
       <div
         style={{
           flex: 1,
+          minHeight: 0, // let the grid below be constrained to the viewport instead of growing it
           display: 'flex',
           flexDirection: 'column',
           gap: '1px',
@@ -242,6 +247,7 @@ export function MissionControl() {
         <div
           style={{
             flex: 1,
+            minHeight: 0, // same — the columns' overflowY:auto then scrolls inside their tracks
             display: 'grid',
             gridTemplateColumns: narrow ? '1fr' : '320px 1fr 360px',
             gap: '1px',
@@ -338,7 +344,9 @@ export function MissionControl() {
               overflowY: 'auto',
             }}
           >
-            <Panel notch="md" style={{ flex: 1 }}>
+            {/* flex column + minHeight:0 so the tab content scrolls inside the panel (#21) —
+                the Panel root's default overflow:hidden would otherwise clip it */}
+            <Panel notch="md" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
               <PanelHeader>
                 <PanelTitle>OPERATIONS // SHIP COMMAND</PanelTitle>
                 <div style={{ marginLeft: 'auto', display: 'flex', gap: '0.5rem' }}>
@@ -346,7 +354,7 @@ export function MissionControl() {
                 </div>
               </PanelHeader>
 
-              <PanelContent style={{ padding: 0 }}>
+              <PanelContent style={{ padding: 0, flex: 1, minHeight: 0, overflowY: 'auto' }}>
                 <Tabs defaultValue="world-map">
                   <TabsList
                     style={{