Fix table node on small screens

markdoc/nodes.js

@@ -6,6 +6,17 @@ const nodes = {
   document: {
     render: undefined,
   },
+  table: {
+    ...defaultNodes.table,
+    render: (props) => {
+      const Table = defaultNodes.table.render
+      return (
+        <div className="my-6 overflow-x-auto">
+          <Table {...props} />
+        </div>
+      )
+    },
+  },
   th: {
     ...defaultNodes.th,
     attributes: {

src/components/Prose.jsx

@@ -17,7 +17,9 @@ export function Prose({ as: Component = 'div', className, ...props }) {
         // pre
         'prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
         // hr
-        'dark:prose-hr:border-slate-800'
+        'dark:prose-hr:border-slate-800',
+        // table
+        'prose-table:m-0'
       )}
       {...props}
     />

tailwind.config.js

@@ -2,7 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{js,jsx,md}'],
+  content: ['./src/**/*.{js,jsx,md}', './markdoc/**'],
   darkMode: 'class',
   theme: {
     fontSize: {