fix(website): mobile overflow + OG/Twitter preview images#169
Merged
Conversation
Mobile (375px) had ~55px horizontal scroll caused by grid tracks defaulting to min-content across nowrap text in Install, AgentInstall, and CommandCenter sections. Replace implicit/`1fr` tracks with `minmax(0, 1fr)` so tracks can shrink below their content and let `overflow: hidden` / `text-overflow: ellipsis` actually clip. Also tightens padding, font-size, and letter-spacing at <=640px for Install boxes, AgentInstall snippet head/code/copy row, CommandCenter tabs and launch strip, and Stats tiles so dense uppercase content stops crowding itself at mobile widths. Adds app/opengraph-image.tsx and app/twitter-image.tsx using next/og ImageResponse, statically prerendered at build (no edge runtime) so socials get a real 1200x630 preview instead of the blank card the site was shipping before.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThe PR introduces Open Graph and Twitter card image generation for the website using Next.js ImageResponse API, along with responsive layout improvements across multiple CSS component modules through minmax grid constraints and mobile breakpoint adjustments. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.cards,.box,.wrap,.split,.chips,.panelwere defaulting to min-content and getting pinned wider than the viewport by nowrap copy (install commands, "RUNS ON :3111 · VIEWER ON :3113", "CURL + HASH + PIN VERSION", etc.). Fix: swap1fr/ implicit tracks forminmax(0, 1fr)and addmin-width: 0on the relevant flex/grid containers sooverflow: hidden+text-overflow: ellipsison.cmdcan actually clip.layout.tsxdeclaredopenGraphandtwittermetadata but shipped no image file, so shares rendered as blank cards. Addedapp/opengraph-image.tsxandapp/twitter-image.tsxusingnext/ogImageResponse. Statically prerendered at build (noruntime = "edge") so Next emits a cacheable 1200x630 PNG.Before / after
/opengraph-image/twitter-imageBuild output confirms both routes are now
○ (Static)rather thanƒ (Dynamic).Test plan
npm run buildinwebsite/— typechecks, 3 static routes generateddocument.documentElement.scrollWidth === 375curl http://localhost:3000/opengraph-image→image/png, 1200x630og:image,og:image:width=1200,twitter:image,twitter:card=summary_large_imageSummary by CodeRabbit
New Features
Style