fix(content): stop wide markdown tables breaking the mobile layout

apps/sim/lib/content/mdx.tsx

@@ -1,3 +1,4 @@
+import type { ComponentPropsWithoutRef } from 'react'
 import clsx from 'clsx'
 import type { MDXRemoteProps } from 'next-mdx-remote/rsc'
 import { CodeBlock } from '@/lib/content/code'
@@ -122,6 +123,21 @@ export const mdxComponents: MDXRemoteProps['components'] = {
       />
     )
   },
+  /**
+   * GFM comparison tables run up to nine columns of prose, which no phone can
+   * fit. Without a scroll container the table sets the page's content width and
+   * the whole article scrolls sideways, clipping body copy at both edges. The
+   * wrapper confines that scrolling to the table's own axis.
+   *
+   * `min-w` keeps columns from collapsing to one word per line inside the
+   * scroll area — narrow enough that tables which already fit (two or three
+   * columns on a tablet, anything on desktop) never gain a scrollbar.
+   */
+  table: ({ className, ...props }: ComponentPropsWithoutRef<'table'>) => (
+    <div className='my-6 w-full overflow-x-auto'>
+      <table {...props} className={clsx('my-0 min-w-[520px]', className)} />
+    </div>
+  ),
   figure: (props: any) => (
     <figure {...props} className={clsx('my-8 overflow-hidden rounded-lg', props.className)} />
   ),

apps/sim/tailwind.config.ts

@@ -13,6 +13,13 @@ export default {
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
+    /**
+     * `lib/content/mdx.tsx` styles rendered blog/library markdown, so it emits
+     * classes like any component does. Without this glob Tailwind only
+     * generates the ones that happen to appear in a scanned file too, and a
+     * class unique to this directory silently resolves to nothing.
+     */
+    './lib/**/*.{js,ts,jsx,tsx,mdx}',
     '../../packages/emcn/src/**/*.{js,ts,jsx,tsx}',
     '../../packages/workflow-renderer/src/**/*.{js,ts,jsx,tsx}',
     '!./app/node_modules/**',