Fix Markdown

client/src/components/ExerciseParts/ExerciseSearchDialog.tsx

@@ -108,10 +108,12 @@ const ExerciseSearchDialog: React.FC<ExerciseSearchDialogProps> = ({
       .map((exercise) => {
         const blockIds = selectedBlocks[exercise._id] || [];
         const blockDurations: Record<string, number> = {};
-        
+
         // Create mapping of blockId to duration
-        blockIds.forEach(blockId => {
-          const block = exercise.description_blocks.find(b => b._id === blockId);
+        blockIds.forEach((blockId) => {
+          const block = exercise.description_blocks.find(
+            (b) => b._id === blockId,
+          );
           if (block) {
             blockDurations[blockId] = block.time_min;
           }
@@ -244,8 +246,10 @@ const ExerciseSearchDialog: React.FC<ExerciseSearchDialogProps> = ({
                             >
                               <Box flex={1}>
                                 <Typography variant="subtitle2">
-                                  {t("block", { defaultValue: "Block" })}{" "}
-                                  {index + 1}
+                                  {t("block.title", {
+                                    blockNumber: index + 1,
+                                    defaultValue: "Block {{blockNumber}}",
+                                  })}
                                 </Typography>
                                 <Typography
                                   variant="caption"

client/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -1,12 +1,48 @@
-import Markdown from "react-markdown";
+import { Box } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import MDEditor from "@uiw/react-md-editor";
+import "@uiw/react-markdown-preview/markdown.css";
 import remarkGfm from "remark-gfm";
 
 interface MarkdownRendererProps {
   children: string;
 }
 
 const MarkdownRenderer = ({ children }: MarkdownRendererProps) => {
-  return <Markdown remarkPlugins={[remarkGfm]}>{children}</Markdown>;
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        overflowX: "auto",
+        "& .wmde-markdown": {
+          backgroundColor: "transparent",
+          color: "inherit",
+          fontFamily: "inherit",
+        },
+        "& .wmde-markdown > :first-of-type": {
+          mt: 0,
+        },
+        "& .wmde-markdown > :last-child": {
+          mb: 0,
+        },
+        "& .wmde-markdown pre": {
+          overflowX: "auto",
+        },
+        "& .wmde-markdown table": {
+          display: "block",
+          maxWidth: "100%",
+          overflowX: "auto",
+        },
+      }}
+    >
+      <MDEditor.Markdown
+        source={children}
+        remarkPlugins={[remarkGfm]}
+        wrapperElement={{ "data-color-mode": theme.palette.mode }}
+      />
+    </Box>
+  );
 };
 
 export default MarkdownRenderer;