From 793db58e3621650e6eb434a6280c5dfac32fe02f Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Wed, 26 Mar 2025 22:48:00 +0800
Subject: [PATCH] feat(mdx): add scroll support for tables

---
 src/components/content/mdx-components.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/content/mdx-components.tsx b/src/components/content/mdx-components.tsx
index f8295c2..c491b8d 100644
--- a/src/components/content/mdx-components.tsx
+++ b/src/components/content/mdx-components.tsx
@@ -1,8 +1,19 @@
 import { HTMLAttributes } from "react";
 import { Pre } from "@/components/content/pre";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 export const MdxComponents = {
   pre: (props: HTMLAttributes<HTMLPreElement>) => <Pre {...props} />,
-  ol: (props: HTMLAttributes<HTMLOListElement>) => <ol style={{ listStyle: "revert" }} {...props} />,
-  ul: (props: HTMLAttributes<HTMLUListElement>) => <ul style={{ listStyle: "revert" }} {...props} />,
+  ol: (props: HTMLAttributes<HTMLOListElement>) => (
+    <ol style={{ listStyle: "revert" }} {...props} />
+  ),
+  ul: (props: HTMLAttributes<HTMLUListElement>) => (
+    <ul style={{ listStyle: "revert" }} {...props} />
+  ),
+  table: (props: HTMLAttributes<HTMLTableElement>) => (
+    <ScrollArea>
+      <table {...props} />
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
 };