WizardLayout: lock list-map to viewport for independent panel scroll
- list-map variant now uses height: 100vh + overflow: hidden on outer wrapper - Only the left panel scrolls (overflowY: auto already set) - Map panel stays fixed, help bar pins to bottom - Added minHeight: 0 on main element to prevent flex overflow - Other layout variants unchanged (still use minHeight: 100vh) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -342,6 +342,11 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
|
|||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
minHeight: '100vh',
|
minHeight: '100vh',
|
||||||
bgcolor: 'background.default',
|
bgcolor: 'background.default',
|
||||||
|
// list-map: lock to viewport so only the left panel scrolls
|
||||||
|
...(variant === 'list-map' && {
|
||||||
|
height: '100vh',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
...(Array.isArray(sx) ? sx : [sx]),
|
...(Array.isArray(sx) ? sx : [sx]),
|
||||||
]}
|
]}
|
||||||
@@ -363,7 +368,10 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Main content area */}
|
{/* Main content area */}
|
||||||
<Box component="main" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
|
<Box
|
||||||
|
component="main"
|
||||||
|
sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}
|
||||||
|
>
|
||||||
<LayoutComponent
|
<LayoutComponent
|
||||||
secondaryPanel={secondaryPanel}
|
secondaryPanel={secondaryPanel}
|
||||||
backLink={
|
backLink={
|
||||||
|
|||||||
Reference in New Issue
Block a user