editor TextField fixes

src/blog/components/Article/ArticleEditor.tsx

@@ -60,6 +60,15 @@ export default function ArticleView({
         sx={{ mb: 3 }}
       />
 
+      {/* DESCRIPTION */}
+      <TextField
+        label="Description"
+        fullWidth
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        sx={{ mb: 3 }}
+      />
+
       <Divider sx={{ mb: 3 }} />
 
       {/* COVER IMAGE URL */}
@@ -74,20 +83,34 @@ export default function ArticleView({
       {/* COVER IMAGE PREVIEW */}
       {img && <CoverImage src={img} alt="cover" />}
 
+      <Divider sx={{ mb: 3 }} />
+
       {/* MARKDOWN EDITOR */}
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'stretch'
+      }}>
         <Typography variant="h6">Content</Typography>
 
-        <TextField
+        <Box
-          multiline
+          component="textarea"
-          minRows={12}
           value={content}
           onChange={(e) => setContent(e.target.value)}
-          sx={{
+          style={{
-            '& textarea': {
+            width: '100%',
-              fontFamily: 'monospace',
+            minHeight: '300px',
-              lineHeight: 1.6,
+            padding: '16px',
-            },
+            borderRadius: '8px',
+            border: '1px solid rgba(255,255,255,0.2)',
+            background: 'transparent',
+            color: 'inherit',
+            fontFamily: 'monospace',
+            fontSize: '16px',
+            lineHeight: 1.6,
+            resize: 'vertical',
+            boxSizing: 'border-box',
           }}
         />