From 159c2cc4a785859e5bf993000fc4d5868ebd45bd Mon Sep 17 00:00:00 2001
From: vanshika2720 <pahalvanshikaa@gmail.com>
Date: Sun, 17 May 2026 14:54:49 +0530
Subject: [PATCH] fix(ui): wrap markdown tables in responsive container for
 mobile

Signed-off-by: vanshika2720 <pahalvanshikaa@gmail.com>
---
 src/theme/MDXComponents/index.js | 39 ++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/theme/MDXComponents/index.js

diff --git a/src/theme/MDXComponents/index.js b/src/theme/MDXComponents/index.js
new file mode 100644
index 000000000..9c52788c9
--- /dev/null
+++ b/src/theme/MDXComponents/index.js
@@ -0,0 +1,39 @@
+import React from "react";
+import Head from "@docusaurus/Head";
+import MDXCode from "@theme/MDXComponents/Code";
+import MDXA from "@theme/MDXComponents/A";
+import MDXPre from "@theme/MDXComponents/Pre";
+import MDXDetails from "@theme/MDXComponents/Details";
+import MDXHeading from "@theme/MDXComponents/Heading";
+import MDXUl from "@theme/MDXComponents/Ul";
+import MDXLi from "@theme/MDXComponents/Li";
+import MDXImg from "@theme/MDXComponents/Img";
+import Admonition from "@theme/Admonition";
+import Mermaid from "@theme/Mermaid";
+
+const MDXComponents = {
+  Head,
+  details: MDXDetails,
+  Details: MDXDetails,
+  code: MDXCode,
+  a: MDXA,
+  pre: MDXPre,
+  ul: MDXUl,
+  li: MDXLi,
+  img: MDXImg,
+  h1: (props) => <MDXHeading as="h1" {...props} />,
+  h2: (props) => <MDXHeading as="h2" {...props} />,
+  h3: (props) => <MDXHeading as="h3" {...props} />,
+  h4: (props) => <MDXHeading as="h4" {...props} />,
+  h5: (props) => <MDXHeading as="h5" {...props} />,
+  h6: (props) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
+  mermaid: Mermaid,
+  table: (props) => (
+    <div style={{ overflowX: "auto" }} tabIndex={0}>
+      <table {...props} />
+    </div>
+  ),
+};
+
+export default MDXComponents;