From a12ae7dee2b9af54abcc957fef98ee17624ba7bb Mon Sep 17 00:00:00 2001
From: carlagn <goncalves@prisma.io>
Date: Tue, 15 Oct 2024 15:21:37 +0100
Subject: [PATCH] fix: WEB-706 Custom overflowX on tables (#6337)

* add table to mdxComponents and overflowX css

* Update table margin

* reset table margin
---
 src/css/custom.css          | 7 ++++++-
 src/theme/MDXComponents.tsx | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 2dd83da4a1..e9497b95d1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -397,13 +397,18 @@ kbd {
   font-family: "JetBrainsMono" !important;
 }
 
+.mdx-table {
+  margin: 0px 0px 20px;
+  overflow-x: scroll;
+}
+
 table {
   word-break: normal;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   border-spacing: 0px;
-  margin: 0 0px 20px;
   white-space: inherit;
+  margin: 0;
   min-width: min-content;
   max-width: 100%;
   width: fit-content;
diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx
index ac3e209208..3ccee3e3cf 100644
--- a/src/theme/MDXComponents.tsx
+++ b/src/theme/MDXComponents.tsx
@@ -190,6 +190,7 @@ export default {
   TopBlock,
   CodeWithResult,
   SwitchTech,
+  table: (p: any) => <div className="mdx-table"><table {...p}>{p.children}</table></div>,
   ParallelBlocks,
   ButtonLink,
   NavigationLinksContainer,