From 4afb21c38b32b59f29fd09237e5e88b85d6fbe1a Mon Sep 17 00:00:00 2001
From: Ender <enderyildirim@outlook.com>
Date: Fri, 24 Oct 2025 20:20:59 +0200
Subject: [PATCH] refactor: improve editor layout with fixed height grid and
 scrollable content panels

---
 apps/admin/src/components/EditorShell.tsx         | 8 +++++---
 apps/admin/src/components/steps/StepContainer.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/admin/src/components/EditorShell.tsx b/apps/admin/src/components/EditorShell.tsx
index 5afcf82..57f8a00 100644
--- a/apps/admin/src/components/EditorShell.tsx
+++ b/apps/admin/src/components/EditorShell.tsx
@@ -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}>
diff --git a/apps/admin/src/components/steps/StepContainer.tsx b/apps/admin/src/components/steps/StepContainer.tsx
index fdb4ae8..f3abd89 100644
--- a/apps/admin/src/components/steps/StepContainer.tsx
+++ b/apps/admin/src/components/steps/StepContainer.tsx
@@ -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>
   );