diff --git a/apps/sim/lib/content/mdx.tsx b/apps/sim/lib/content/mdx.tsx index 0e82c6124c2..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' @@ -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'>) => ( +