Skip to content

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

Merged
waleedlatif1 merged 2 commits into
stagingfrom
fix/mdx-table-overflow
Jul 27, 2026
Merged

fix(content): stop wide markdown tables breaking the mobile layout#5984
waleedlatif1 merged 2 commits into
stagingfrom
fix/mdx-table-overflow

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

Summary

Reported on mobile for /library/ai-agents-in-procurement.

  • 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 — body copy was clipped at both edges and the table's right-hand columns were unreachable, with no scroll to get to them
  • 19 of 20 library posts contain a table, so this affected nearly the whole section
  • Wraps tables in an overflow-x-auto container so scrolling is confined to the table's own axis, plus a min-w so columns don't crush to one word per line inside it
  • Blog and library both compile through the same mdxComponents map via createContentRegistry, so one fix covers both surfaces

The Tailwind part

min-w-[520px] initially did nothing. apps/sim/tailwind.config.ts scanned only app, components, and pages — not lib — so lib/content/mdx.tsx was invisible to Tailwind and any class unique to it was never generated.

That was not a stale-cache artifact; I isolated it in a clean worktree with .next removed:

computed min-width
mdx.tsx fix only 0px
mdx.tsx fix + lib/** glob 520px

It also means existing styles in that file were already silently dead — list-outside, text-[19px], text-[0.9em], my-0 were all missing from the generated CSS, which is why the file leans on inline style for font sizes. Adding the glob grows the CSS by 538 bytes minified (+0.26%), all additions, nothing removed.

Verification

Driven in a real browser (Chromium, iPhone viewport + tablet + desktop) against pages with 3, 4, and 9 column tables:

viewport page scrolls sideways table wrapped table scrolls
iPhone 390px no (was: clipped) yes yes
Tablet 768px no yes only the 9-col
Desktop 1440px no yes only the 9-col

No page scrolls horizontally at any viewport, and narrow tables gain no scrollbar on tablet/desktop, so there's no regression for tables that already fit. Blog verified by temporarily un-drafting blog/copilot locally (it's draft: true, so it 404s otherwise) — same wrapper, same result.

Note

The scroll edge has no visual affordance (fade or shadow) hinting the table scrolls. Worth a follow-up, but out of scope here.

Type of Change

  • Bug fix

Testing

Tested manually in a browser across three viewports and four posts, as tabled above.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

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.
@vercel

vercel Bot commented Jul 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Jul 27, 2026 9:22pm

Request Review

@cursor

cursor Bot commented Jul 27, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Presentation-only MDX/Tailwind changes for marketing content; no auth, data, or API behavior.

Overview
Wide GFM tables in blog/library posts no longer blow out the page on mobile. MDX now renders table inside a full-width overflow-x-auto wrapper with a min-w-[520px] on the table so horizontal scroll stays on the table axis and columns don’t collapse to one word per line.

Tailwind now scans ./lib/** so classes emitted from lib/content/mdx.tsx (including min-w-[520px]) are actually generated—previously they were missing from the CSS bundle along with other utilities only used in that file.

Reviewed by Cursor Bugbot for commit 1f4147b. Configure here.

@greptile-apps

greptile-apps Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

Fixes wide Markdown tables on mobile:

  • Wraps rendered GFM tables in a horizontally scrollable container and enforces a minimum table width.
  • Adds apps/sim/lib to Tailwind’s content scan so the new and existing utility classes in MDX renderers are generated.
  • Replaces the table renderer’s any props with typed intrinsic table props.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename Overview
apps/sim/lib/content/mdx.tsx Adds localized horizontal scrolling for wide Markdown tables and fully resolves the prior table-props typing concern.
apps/sim/tailwind.config.ts Extends Tailwind content discovery to utility classes used by components under the Sim app’s lib directory.

Reviews (2): Last reviewed commit: "chore(content): type the table renderer ..." | Re-trigger Greptile

Comment thread apps/sim/lib/content/mdx.tsx Outdated
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.
@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 1f4147b. Configure here.

@waleedlatif1
waleedlatif1 merged commit 9c10943 into staging Jul 27, 2026
15 checks passed
@waleedlatif1
waleedlatif1 deleted the fix/mdx-table-overflow branch July 27, 2026 21:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant