From 66c3395e3749b8e81f9c7c3db04eeade2ce7742c Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 27 Jul 2026 14:15:47 -0700
Subject: [PATCH 1/2] fix(content): stop wide markdown tables breaking the
 mobile layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 apps/sim/lib/content/mdx.tsx | 15 +++++++++++++++
 apps/sim/tailwind.config.ts  |  7 +++++++
 2 files changed, 22 insertions(+)

diff --git a/apps/sim/lib/content/mdx.tsx b/apps/sim/lib/content/mdx.tsx
index 0e82c6124c2..8d2eb321539 100644
--- a/apps/sim/lib/content/mdx.tsx
+++ b/apps/sim/lib/content/mdx.tsx
@@ -122,6 +122,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 }: any) => (
+    <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)} />
   ),
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index b8524763776..5fd3276e71d 100644
--- a/apps/sim/tailwind.config.ts
+++ b/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/**',

From 1f4147bdec7f6260aefcb68f7f6708109aeb624b Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 27 Jul 2026 14:22:32 -0700
Subject: [PATCH 2/2] 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.
---
 apps/sim/lib/content/mdx.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/sim/lib/content/mdx.tsx b/apps/sim/lib/content/mdx.tsx
index 8d2eb321539..8a0973abfb2 100644
--- a/apps/sim/lib/content/mdx.tsx
+++ b/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'
@@ -132,7 +133,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
    * 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 }: any) => (
+  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>