v0.9.3 — layout: only middle pane scrolls, side panels stay fixed (#21) #24

Merged
kamilkrzywda merged 2 commits from middle-pane-scroll into master 2026-09-29 10:24:56 +02:00
Showing only changes of commit d2fb252a98 - Show all commits
+10 -2
View File
@@ -107,6 +107,10 @@ export function MissionControl() {
<div <div
style={{ style={{
minHeight: '100vh', 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)', background: 'var(--background)',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@@ -196,6 +200,7 @@ export function MissionControl() {
<div <div
style={{ style={{
flex: 1, flex: 1,
minHeight: 0, // let the grid below be constrained to the viewport instead of growing it
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '1px', gap: '1px',
@@ -242,6 +247,7 @@ export function MissionControl() {
<div <div
style={{ style={{
flex: 1, flex: 1,
minHeight: 0, // same — the columns' overflowY:auto then scrolls inside their tracks
display: 'grid', display: 'grid',
gridTemplateColumns: narrow ? '1fr' : '320px 1fr 360px', gridTemplateColumns: narrow ? '1fr' : '320px 1fr 360px',
gap: '1px', gap: '1px',
@@ -338,7 +344,9 @@ export function MissionControl() {
overflowY: 'auto', 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> <PanelHeader>
<PanelTitle>OPERATIONS // SHIP COMMAND</PanelTitle> <PanelTitle>OPERATIONS // SHIP COMMAND</PanelTitle>
<div style={{ marginLeft: 'auto', display: 'flex', gap: '0.5rem' }}> <div style={{ marginLeft: 'auto', display: 'flex', gap: '0.5rem' }}>
@@ -346,7 +354,7 @@ export function MissionControl() {
</div> </div>
</PanelHeader> </PanelHeader>
<PanelContent style={{ padding: 0 }}> <PanelContent style={{ padding: 0, flex: 1, minHeight: 0, overflowY: 'auto' }}>
<Tabs defaultValue="world-map"> <Tabs defaultValue="world-map">
<TabsList <TabsList
style={{ style={{