Fix the table element overflow (#787)

* add terminals.run blog for example
* fix table element overflow

components/MDXComponents.tsx

@@ -4,11 +4,13 @@ import BlogNewsletterForm from 'pliny/ui/BlogNewsletterForm'
 import type { MDXComponents } from 'mdx/types'
 import Image from './Image'
 import CustomLink from './Link'
+import TableWrapper from './TableWrapper'
 
 export const components: MDXComponents = {
   Image,
   TOCInline,
   a: CustomLink,
   pre: Pre,
+  table: TableWrapper,
   BlogNewsletterForm,
 }

components/TableWrapper.tsx

@@ -0,0 +1,9 @@
+const TableWrapper = ({ children }) => {
+  return (
+    <div className="w-full overflow-x-auto">
+      <table>{children}</table>
+    </div>
+  )
+}
+
+export default TableWrapper