From 03eeb012479ae6717f5e0097cad356f77bcd48ea Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 23 Apr 2025 18:02:14 +0100
Subject: [PATCH] chore: use new table design for markdown rendering (#17530)

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"
/>
---
 site/src/components/Markdown/Markdown.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index 7e9ee30246..a9bac7c6ad 100644
--- 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,11 +91,7 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 				},
 
 				table: ({ children }) => {
-					return (
-						<TableContainer>
-							<Table>{children}</Table>
-						</TableContainer>
-					);
+					return <Table>{children}</Table>;
 				},
 
 				tr: ({ children }) => {
@@ -102,7 +99,7 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 				},
 
 				thead: ({ children }) => {
-					return <TableHead>{children}</TableHead>;
+					return <TableHeader>{children}</TableHeader>;
 				},
 
 				tbody: ({ children }) => {