endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions 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>
{/* 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 }}>
{[ 'Assets', 'AI Prompt', 'Generate', 'Edit', 'Metadata', 'Publish' ].map((label, idx) => (
<Step key={label} completed={false}>
@ -211,6 +211,7 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
))}
</Stepper>
<Box sx={{ minHeight: 0, overflow: 'hidden' }}>
{activeStep === 0 && (
<StepContainer>
<StepAssets
@ -276,9 +277,10 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
/>
</StepContainer>
)}
</Box>
{/* Sticky bottom nav so Back/Next don't move */}
<Box sx={{ position: 'sticky', bottom: 0, bgcolor: 'background.paper', py: 1, borderTop: '1px solid', borderColor: 'divider', zIndex: 1, mt: 2 }}>
{/* Bottom nav fixed to panel bottom via grid */}
<Box sx={{ bgcolor: 'background.paper', py: 1, borderTop: '1px solid', borderColor: 'divider' }}>
<Stack direction="row" spacing={1} justifyContent="space-between">
<Button disabled={activeStep === 0} onClick={() => setActiveStep((s) => Math.max(0, s - 1))}>Back</Button>
<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> }>) {
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}
</Box>
);