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',
|
||||
minHeight: '100vh',
|
||||
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]),
|
||||
]}
|
||||
@@ -363,7 +368,10 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
|
||||
)}
|
||||
|
||||
{/* 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
|
||||
secondaryPanel={secondaryPanel}
|
||||
backLink={
|
||||
|
||||
Reference in New Issue
Block a user