fix: table overflow

src/components/EntryBody.tsx

@@ -7,7 +7,7 @@ import "katex/dist/katex.min.css"
 import BodyLink from "./BodyLink"
 import EntryLoadingSkeleton from "./EntryLoadingSkeleton"
 import { useSearchParams } from "react-router"
-
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table"
 const ImagePreprocessor = (src) => {
 	const filename = src.src.split("/").pop()
 	const s3RootUrl = "https://eolas.s3.systemsobscure.net/"
@@ -78,22 +78,17 @@ export default function EntryBody({ body, isLoading }) {
 							{highlighter(children, highlight)}
 						</li>
 					),
-               table: ({ children }) => <table className="w-full mb-4 text-sm">{children}</table>,
-               tr: ({ children }) => (
-                  <tr className="even:bg-muted m-0 border-t p-0">
-                     {highlighter(children, highlight)}
-                  </tr>
-               ),
-               th: ({ children }) => (
-                  <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                     {highlighter(children, highlight)}
-                  </th>
-               ),
-               td: ({ children }) => (
-                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                     {highlighter(children, highlight)}
-                  </td>
+					table: ({ children }) => (
+						<Table className="w-full mb-4 text-sm overflow-x-auto">{children}</Table>
 					),
+					thead: ({ children }) => <TableHeader>{children}</TableHeader>,
+
+					tr: ({ children }) => <TableRow>{highlighter(children, highlight)}</TableRow>,
+
+					th: ({ children }) => <TableHead>{highlighter(children, highlight)}</TableHead>,
+					td: ({ children }) => <TableCell>{highlighter(children, highlight)}</TableCell>,
+					tbody: ({ children }) => <TableBody>{children}</TableBody>,
+
 					blockquote: ({ children }) => (
 						<blockquote className="mt-4 border-l-2 pl-6 text-muted-foreground">
 							{highlighter(children, highlight)}