From 0b108f5492f854b27a5de2ee8c63386519de3453 Mon Sep 17 00:00:00 2001
From: mlsmaycon <mlsmaycon@gmail.com>
Date: Sun, 16 Aug 2026 02:45:00 +0000
Subject: [PATCH] Scroll wide tables instead of overlapping the page menu

The expanded permissions matrix on the user-roles page is wider than the
content column, and markdown tables had no overflow container, so the
extra columns rendered underneath the sticky "On this page" menu. Map
the MDX table element to a wrapper that scrolls horizontally within the
column, fixing every wide table site-wide.
---
 src/components/mdx.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/mdx.jsx b/src/components/mdx.jsx
index 4172ce6d..ab0ba179 100644
--- a/src/components/mdx.jsx
+++ b/src/components/mdx.jsx
@@ -26,6 +26,16 @@ export const h5 = function H5(props) {
   return <Heading level={5} {...props} />
 }
 
+// Wide markdown tables would otherwise paint past the content column and
+// under the sticky "On this page" menu; scroll them within the column instead.
+export const table = function Table(props) {
+  return (
+    <div className="overflow-x-auto">
+      <table {...props} />
+    </div>
+  )
+}
+
 function InfoIcon(props) {
   return (
     <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>