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'>) => ( +
+ + + ), figure: (props: any) => (
), 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/**',