feat(ui): only the middle column scrolls — side panes stay fixed (#21)
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.
This commit is contained in:
@@ -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={{
|
||||||
|
|||||||
Reference in New Issue
Block a user