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

@@ -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}>