fix: centered cards on case studies page maintaing responsiveness. #3791
Conversation
shaileshkaliya
requested review from
derberg,
akshatnema,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThis change updates the layout strategy in the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 180000ms (3)
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:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
shaileshkaliya
changed the title
![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)
components/CaseStudyCard.tsx (1)
22-22: Fix quotes and optimize redundant Tailwind classes.I see you've successfully changed from a grid to a flexbox layout for better centering of the cards. However, there are a few optimization opportunities:
- There are redundant Tailwind classes:
lg:flexandlg:justify-centerare unnecessary since you already haveflexandjustify-centerin the base classes.- The static analysis flagged an issue with using double quotes instead of single quotes for the className attribute.
- <div className="flex flex-wrap gap-3 justify-center pt-10 lg:flex lg:justify-center lg:gap-8 lg:text-center"> + <div className='flex flex-wrap gap-3 justify-center pt-10 lg:gap-8 lg:text-center'>This change removes the redundant classes while maintaining the same functionality and fixes the quotes to match the project's style conventions.
🧰 Tools
🪛 ESLint
[error] 22-22: Replace
"flex·flex-wrap·gap-3·justify-center·pt-10·lg:flex·lg:justify-center·lg:gap-8·lg:text-center"with'flex·flex-wrap·gap-3·justify-center·pt-10·lg:flex·lg:justify-center·lg:gap-8·lg:text-center'(prettier/prettier)
[error] 22-22: Unexpected usage of doublequote.
(jsx-quotes)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/CaseStudyCard.tsx(1 hunks)
🧰 Additional context used
🪛 ESLint
components/CaseStudyCard.tsx
[error] 22-22: Replace "flex·flex-wrap·gap-3·justify-center·pt-10·lg:flex·lg:justify-center·lg:gap-8·lg:text-center" with 'flex·flex-wrap·gap-3·justify-center·pt-10·lg:flex·lg:justify-center·lg:gap-8·lg:text-center'
(prettier/prettier)
[error] 22-22: Unexpected usage of doublequote.
(jsx-quotes)
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (1)
components/CaseStudyCard.tsx (1)
22-38: Great implementation of responsive centering.The change from grid to flexbox for the case study cards layout is an effective solution to the centering issue mentioned in the PR objectives. Using
flex,flex-wrap, andjustify-centerensures that:
- Cards are properly centered on all screen sizes
- The layout remains responsive
- New cards can be added without breaking the design
The increased gap (
lg:gap-8) on larger screens also improves readability and visual separation between cards.🧰 Tools
🪛 ESLint
[error] 22-22: Replace
"flex·flex-wrap·gap-3·justify-center·pt-10·lg:flex·lg:justify-center·lg:gap-8·lg:text-center"with'flex·flex-wrap·gap-3·justify-center·pt-10·lg:flex·lg:justify-center·lg:gap-8·lg:text-center'(prettier/prettier)
[error] 22-22: Unexpected usage of doublequote.
(jsx-quotes)
|
Hi @shaileshkaliya, Can you check and resolve the failing tests. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3791 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 21 21
Lines 667 667
Branches 113 113
=========================================
Hits 667 667 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@devilkiller-ag |
Description
Walkthrough
This pull request fixes the alignment issue on the case studies page (Issue #3788), ensuring that the cards are properly centered. The updated layout is designed to handle future additions of new cards without breaking responsiveness.
Changes
CaseStudyCard.tsxBefore & After Screenshots
Before fix :After fix :In mobile size screens :This fix ensures better visual balance and scalability. Let me know if any refinements are needed! 🚀
Related issue(s)
Fixes issue #3788
Summary by CodeRabbit