fix: #4381 make the buttons responsive #4391
Conversation
Priyank0703
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAdjusted the button container in pages/tools/generator.tsx by adding responsive Tailwind classes to change alignment and layout on small screens and up. No logic or exports changed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4391 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 778 778
Branches 144 144
=========================================
Hits 778 778 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4391--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
pages/tools/generator.tsx (1)
148-148: Simplify wrapper; move alignment into renderButtons; avoid redundant utilities.
sm:flexwith a single child plussm:text-left(no-op for a flex child) is unnecessary. Center/left behavior is clearer if handled by the inner container; also prevents compounded margins.Suggested refactor (keeps behavior while reducing complexity and avoiding double top margins at the bottom):
- <div className='mt-16 text-center sm:text-left sm:flex sm:justify-center'>{renderButtons()}</div> + <div className='mt-16'>{renderButtons()}</div>And adjust renderButtons and its first call site:
- <div className='mt-8 flex flex-wrap gap-4'> + <div className='flex flex-wrap gap-4 justify-center sm:justify-start'>- {renderButtons()} + <div className='mt-8'>{renderButtons()}</div>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
pages/tools/generator.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Lighthouse CI
- GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (2)
pages/tools/generator.tsx (2)
148-148: LGTM — bottom CTA wrapper is now responsive.The added responsive classes improve layout on small screens and up without affecting logic.
148-148: Confirm intended alignment ≥640px; tweak if needed.With
sm:flex sm:justify-center, the button group is centered as a block on ≥640px. If you instead want it left-aligned (to match nearby text), switch to start-justification:- <div className='mt-16 text-center sm:text-left sm:flex sm:justify-center'>{renderButtons()}</div> + <div className='mt-16 sm:flex sm:justify-start'>{renderButtons()}</div>
2 participants
fix: #4381
Description
fix: #4381
Related issue(s)
Summary by CodeRabbit