Fix: Adjust case studies grid for different number of cards #3572
Conversation
Aditya-Prakash14
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe pull request modifies 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)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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.
|
We require all PRs to follow Conventional Commits specification. |
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3572--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 (2)
components/CaseStudyCard.tsx (2)
21-27: LGTM! Consider using an object map for better maintainability.The grid class logic correctly implements the responsive layout based on the number of case studies.
Consider using an object map for better maintainability:
- let gridClass = 'lg:grid-cols-3'; // Default to 3 columns for larger screens - - if (studies.length === 1) { - gridClass = 'lg:grid-cols-1'; - } else if (studies.length === 2) { - gridClass = 'lg:grid-cols-2'; - } + const gridColumnMap = { + 1: 'lg:grid-cols-1', + 2: 'lg:grid-cols-2', + default: 'lg:grid-cols-3' + }; + const gridClass = gridColumnMap[studies.length] || gridColumnMap.default;
30-30: Consider extracting className for better readability.The container styling is correct but the className is becoming lengthy.
Consider extracting the className into a constant:
+ const containerClassName = [ + 'mx-auto flex max-w-screen-lg flex-wrap', + 'gap-4 pt-10', + 'lg:grid lg:gap-8 lg:text-center', + gridClass + ].join(' '); + - <div className={`mx-auto flex max-w-screen-lg flex-wrap gap-4 pt-10 lg:grid lg:gap-8 lg:text-center ${gridClass}`}> + <div className={containerClassName}>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/CaseStudyCard.tsx(1 hunks)
🔇 Additional comments (2)
components/CaseStudyCard.tsx (2)
32-32: Well-structured responsive styling!The card styling changes effectively handle:
- Full width and flex behavior for mobile responsiveness
- Consistent minimum height to prevent layout shifts
- Proper padding scaling across breakpoints
Also applies to: 34-34
34-34: Verify test coverage for the new grid layouts.The component has proper test hooks with
data-testid. Ensure test cases cover the new responsive layouts with 1, 2, and 3+ cards.Run this script to check existing test coverage:
components/CaseStudyCard.tsx
Outdated
| let gridClass = 'lg:grid-cols-3'; // Default to 3 columns for larger screens | ||
|
|
||
| if (studies.length === 1) { | ||
| gridClass = 'lg:grid-cols-1'; | ||
| } else if (studies.length === 2) { | ||
| gridClass = 'lg:grid-cols-2'; | ||
| } | ||
|
|
There was a problem hiding this comment.
Since we can have different number of cards, why to use grid over flex?
Fix: Adjust Case Studies Grid Layout
Summary
This PR adjusts the Case Studies page layout to dynamically adapt to the number of displayed case studies, resolving the issue of uneven spacing when fewer than three cards are present.
Fixes Issue: #3566 (Replace with actual number)
Description:
The original implementation used a static
grid-cols-3class, which resulted in an inconsistent layout when fewer than three case studies were displayed. This PR introduces a dynamic grid implementation withincomponents/CaseStudyCard.tsx:lg:grid-cols-1for one case study.lg:grid-cols-2for two case studies.lg:grid-cols-3for three or more case studies.components/CaseStudyCard.tsx.components/CaseStudyCard.tsx.text-centerto the outer div.components/CaseStudyCard.tsx.Before:
After:
How to Test
Summary by CodeRabbit