From a05fdda2d2b1e0a7c4bfa67f3df1d10d139f33f6 Mon Sep 17 00:00:00 2001
From: Ender <enderyildirim@outlook.com>
Date: Fri, 24 Oct 2025 18:19:43 +0200
Subject: [PATCH] feat: add responsive styles for media content in editor and
 preview

---
 apps/admin/src/components/EditorShell.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/admin/src/components/EditorShell.tsx b/apps/admin/src/components/EditorShell.tsx
index bcfd3b6..23c993c 100644
--- a/apps/admin/src/components/EditorShell.tsx
+++ b/apps/admin/src/components/EditorShell.tsx
@@ -255,7 +255,14 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
           {activeStep === 3 && (
             <Box>
               <Typography variant="subtitle1" sx={{ mb: 1 }}>Edit Content</Typography>
-              <RichEditor ref={editorRef as any} value={draft} onChange={(html) => setDraft(html)} placeholder="Write your post..." />
+              <Box sx={{
+                overflowX: 'auto',
+                '& img': { maxWidth: '100%', height: 'auto' },
+                '& figure img': { display: 'block', margin: '0 auto' },
+                '& video, & iframe': { maxWidth: '100%' },
+              }}>
+                <RichEditor ref={editorRef as any} value={draft} onChange={(html) => setDraft(html)} placeholder="Write your post..." />
+              </Box>
               {draftId && (
                 <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>ID: {draftId}</Typography>
               )}
@@ -286,7 +293,17 @@ export default function EditorShell({ onLogout, initialPostId, onBack }: { onLog
                 <Alert severity="error">{previewError}</Alert>
               )}
               {!previewLoading && !previewError && (
-                <Box sx={{ p: 1.5, border: '1px solid #eee', borderRadius: 1, bgcolor: '#fff' }}
+                <Box
+                  sx={{
+                    p: 1.5,
+                    border: '1px solid #eee',
+                    borderRadius: 1,
+                    bgcolor: '#fff',
+                    overflowX: 'auto',
+                    '& img': { maxWidth: '100%', height: 'auto' },
+                    '& figure img': { display: 'block', margin: '0 auto' },
+                    '& video, & iframe': { maxWidth: '100%' },
+                  }}
                   dangerouslySetInnerHTML={{ __html: previewHtml || draft }}
                 />
               )}