v0.9.3 — layout: only middle pane scrolls, side panels stay fixed (#21) #24
@@ -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={{
|
||||
|
||||
Reference in New Issue
Block a user