chore: use new table design for markdown rendering (#17530)

jaaydenh · web-flow · commit 03eeb012479a · 2025-04-23T13:02:14.000-04:00
resolves #17502 <img width="756" alt="Screenshot 2025-04-23 at 11 26 19" src="https://github.com/user-attachments/assets/667c595c-21de-496c-8f25-3dca9f840c7c" />
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
@@ -1,11 +1,12 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHeader,
+	TableRow,
+} from "components/Table/Table";
 import isEqual from "lodash/isEqual";
 import { type FC, memo } from "react";
 import ReactMarkdown, { type Options } from "react-markdown";
@@ -90,19 +91,15 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 				},
 
 				table: ({ children }) => {
-					return (
-						<TableContainer>
-							<Table>{children}</Table>
-						</TableContainer>
-					);
+					return <Table>{children}</Table>;
 				},
 
 				tr: ({ children }) => {
 					return <TableRow>{children}</TableRow>;
 				},
 
 				thead: ({ children }) => {
-					return <TableHead>{children}</TableHead>;
+					return <TableHeader>{children}</TableHeader>;
 				},
 
 				tbody: ({ children }) => {
