fix: WEB-706 Custom overflowX on tables (#6337)

* add table to mdxComponents and overflowX css * Update table margin * reset table margin
prisma · Oct 15, 2024 · a12ae7d · a12ae7d
1 parent 0f32f59
commit a12ae7d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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,