endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: improve editor layout with fixed height grid and scrollable content panels

Browse Source
This commit is contained in:
Ender 2025-10-24 20:20:59 +02:00
parent 7ca9b130c3
commit 4afb21c38b
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/admin/src/components/EditorShell.tsx
View File

@ -200,7 +200,7 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
</Box> </Box>
{/* Right content: Stepper and step panels */} {/* Right content: Stepper and step panels */}
<Box> <Box sx={{ display: 'grid', gridTemplateRows: 'auto 1fr auto', height: '85vh', minHeight: 500, overflow: 'hidden' }}>
<Stepper nonLinear activeStep={activeStep} sx={{ mb: 2 }}> <Stepper nonLinear activeStep={activeStep} sx={{ mb: 2 }}>
{[ 'Assets', 'AI Prompt', 'Generate', 'Edit', 'Metadata', 'Publish' ].map((label, idx) => ( {[ 'Assets', 'AI Prompt', 'Generate', 'Edit', 'Metadata', 'Publish' ].map((label, idx) => (
<Step key={label} completed={false}> <Step key={label} completed={false}>
@ -211,6 +211,7 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
))} ))}
</Stepper> </Stepper>
<Box sx={{ minHeight: 0, overflow: 'hidden' }}>
{activeStep === 0 && ( {activeStep === 0 && (
<StepContainer> <StepContainer>
<StepAssets <StepAssets
@ -276,9 +277,10 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
/> />
</StepContainer> </StepContainer>
)} )}
</Box>
{/* Sticky bottom nav so Back/Next don't move */} {/* Bottom nav fixed to panel bottom via grid */}
<Box sx={{ position: 'sticky', bottom: 0, bgcolor: 'background.paper', py: 1, borderTop: '1px solid', borderColor: 'divider', zIndex: 1, mt: 2 }}> <Box sx={{ bgcolor: 'background.paper', py: 1, borderTop: '1px solid', borderColor: 'divider' }}>
<Stack direction="row" spacing={1} justifyContent="space-between"> <Stack direction="row" spacing={1} justifyContent="space-between">
<Button disabled={activeStep === 0} onClick={() => setActiveStep((s) => Math.max(0, s - 1))}>Back</Button> <Button disabled={activeStep === 0} onClick={() => setActiveStep((s) => Math.max(0, s - 1))}>Back</Button>
<Stack direction="row" spacing={1}> <Stack direction="row" spacing={1}>

2
apps/admin/src/components/steps/StepContainer.tsx
View File

@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
export default function StepContainer({ children, sx }: PropsWithChildren<{ sx?: SxProps<Theme> }>) { export default function StepContainer({ children, sx }: PropsWithChildren<{ sx?: SxProps<Theme> }>) {
return ( return (
<Box sx={{ height: { xs: '70vh', md: '70vh' }, maxHeight: '70vh', overflowY: 'auto', pr: 0.5, display: 'grid', gap: 2, ...sx }}> <Box sx={{ height: '100%', minHeight: 0, overflowY: 'auto', pr: 0.5, display: 'grid', gap: 2, ...sx }}>
{children} {children}
</Box> </Box>
); );