fix markdown field styles

src/components/fields/Markdown/BasicCell.tsx

@@ -6,6 +6,7 @@ import MDEditor from "@uiw/react-md-editor";
 
 export default function Code({ value }: IBasicCellProps) {
   const theme = useTheme();
+
   return (
     <div data-color-mode={theme.palette.mode}>
       <MDEditor.Markdown source={value} />

src/components/fields/Markdown/SideDrawerField.tsx

@@ -1,24 +1,47 @@
 import { useTheme } from "@mui/material";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
+import { Box } from "@mui/material";
 import MDEditor from "@uiw/react-md-editor";
 
-export default function Code({
+import { fieldSx } from "@src/components/SideDrawer/utils";
+
+export default function Markdown({
   value,
   onChange,
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const theme = useTheme();
+
+  if (disabled)
+    return (
+      <Box
+        sx={[fieldSx, { display: "block", maxHeight: 300, overflow: "auto" }]}
+        data-color-mode={theme.palette.mode}
+      >
+        <MDEditor.Markdown source={value} />
+      </Box>
+    );
+
   return (
-    <div data-color-mode={theme.palette.mode}>
+    <Box
+      sx={[
+        fieldSx,
+        {
+          display: "block",
+          padding: 0,
+          "& .wmde-markdown-var": { boxShadow: "none" },
+        },
+      ]}
+      data-color-mode={theme.palette.mode}
+    >
       <MDEditor
-        aria-disabled={disabled}
-        height={200}
+        height={300}
         value={value}
         onChange={onChange}
         onBlur={onSubmit}
       />
-    </div>
+    </Box>
   );
 }

src/theme/components.tsx

@@ -168,6 +168,28 @@ export const components = (theme: Theme): ThemeOptions => {
               caretColor: theme.palette.primary.main,
             },
           },
+
+          ".wmde-markdown.wmde-markdown, .wmde-markdown-var.wmde-markdown-var":
+            {
+              font: "inherit",
+              fontFeatureSettings: "inherit",
+              letterSpacing: "inherit",
+              backgroundColor: "transparent",
+              color: "inherit",
+
+              "--color-canvas-default": "transparent",
+              "--color-border-default": theme.palette.divider,
+              "--color-border-muted": theme.palette.divider,
+
+              "& .w-md-editor-text": { fontFeatureSettings: "inherit" },
+
+              "& .w-md-editor-text-pre > code": {
+                font: "inherit !important",
+                fontFeatureSettings: "inherit",
+                letterSpacing: "inherit",
+                background: "none",
+              },
+            },
         },
       },