Skip to content

fix(story): make tweet cards grid responsive on mobile screens#964

Merged
Yeom-JinHo merged 2 commits into
magicuidesign:mainfrom
KhaledSaeed18:fix/story-mobile-tweet-grid-responsive
May 8, 2026
Merged

fix(story): make tweet cards grid responsive on mobile screens#964
Yeom-JinHo merged 2 commits into
magicuidesign:mainfrom
KhaledSaeed18:fix/story-mobile-tweet-grid-responsive

Conversation

@KhaledSaeed18

Copy link
Copy Markdown
Contributor

Description

Fix tweet cards grid on the Story page breaking on mobile screens. The grid was hardcoded to 3 columns with no responsive breakpoint, causing cards to overflow and clip on small viewports.

Changes

Changed columns-3 to columns-1 md:columns-3 in apps/www/content/docs/story.mdx so the tweet grid stacks to a single column on mobile and returns to 3 columns on medium screens and above.

Motivation

On mobile, the 3-column masonry grid in /docs/story was overflowing its container, cards were clipped and text was cut off. The fix mirrors the same responsive pattern already used in the homepage testimonials section (components/sections/testimonials.tsx).

Breaking Changes

None.

Screenshots

Device / Browser / Viewport: DevTools device emulation / Chrome / iPhone 14 Pro Max (430x932)

Before After
mui-story-b mui-story-a

@vercel

vercel Bot commented May 7, 2026

Copy link
Copy Markdown

@KhaledSaeed18 is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

@Yeom-JinHo Yeom-JinHo self-requested a review May 8, 2026 16:35
@Yeom-JinHo

Copy link
Copy Markdown
Member

@KhaledSaeed18
Tysm for your contribution.

@Yeom-JinHo Yeom-JinHo merged commit fd92693 into magicuidesign:main May 8, 2026
5 of 6 checks passed
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.

2 participants