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

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

Library and blog posts render GFM tables straight into the prose container
with no width bound. Comparison tables run up to nine columns, so on a
phone the table set the article's content width and body copy was clipped
at both edges with no way to scroll to it — the table simply ran off the
canvas. 19 of 20 library posts contain a table.

Wraps tables in an `overflow-x-auto` container so that scrolling is
confined to the table's own axis, and gives the table a `min-w` so columns
do not crush to one word per line inside it. Both surfaces share
`mdxComponents`, so this covers blog posts too.

Also adds `lib/**` to Tailwind's content globs. `lib/content/mdx.tsx`
emits classes like any component, but only `app`, `components`, and `pages`
were scanned, so a class unique to that file was silently never generated
— `min-w-[520px]` here, and already `list-outside`, `text-[19px]`, and
`text-[0.9em]` on the existing paragraph and list styles. Verified against
a real browser: without the glob the rule is absent and computed
`min-width` stays `0px`. Generated CSS grows 538 bytes minified (+0.26%),
all additions, nothing removed.

* chore(content): type the table renderer instead of any

Uses `ComponentPropsWithoutRef<'table'>` so the destructured and forwarded
props are checked. The surrounding renderers in this file still take `any`;
converting them is a separate cleanup, not something to fold into a mobile
layout fix.

Author: waleedlatif1

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/**',