Skip to content

Conversation

@erankitkr011
Copy link

@erankitkr011 erankitkr011 commented Nov 6, 2025

Fixes #4543

Screenshot 2025-11-06 at 12 05 29 PM

Summary by CodeRabbit

  • Style
    • Refined roadmap card presentation with updated backgrounds, borders, rounded corners, shadows, padding, and vertical layout tweaks for improved spacing and consistency.
    • Responsive adjustments to ensure cards maintain a polished appearance and full-height alignment on larger screens.

@netlify
Copy link

netlify bot commented Nov 6, 2025

Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 6077035
🔍 Latest deploy log https://app.netlify.com/projects/asyncapi-website/deploys/690c402d2511e000088da1c4
😎 Deploy Preview https://deploy-preview-4545--asyncapi-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 6, 2025

Walkthrough

Replaced three plain container divs in the Roadmap grid with styled divs, adding Tailwind utility classes for background, border, rounding, padding, shadow, flex layout, and responsive height. No logic, data flow, or conditional behavior changed.

Changes

Cohort / File(s) Change Summary
Roadmap card styling
pages/roadmap.tsx
Replaced three card container <div> elements with styled <div>s by adding Tailwind classes: bg-white, border, border-gray-200, rounded-lg, shadow-md, p-6, flex, flex-col, justify-start, and lg:h-full. Presentation-only change; no logic changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Purely cosmetic, consistent changes across three similar elements.
  • Quick visual verification recommended.

Suggested labels

ready-to-merge

Suggested reviewers

  • derberg
  • sambhavgupta0705
  • anshgoyalevil
  • Mayaleeeee
  • devilkiller-ag

Poem

🐰 Cards snug in white and gray,
Tailwind trims the evening's fray,
Three small hills with rounded cheer,
The roadmap hops—spring's styling here.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title 'style: improve styling of Goal divs in Roadmap page' accurately and specifically describes the main change: CSS styling improvements to Goal divs on the Roadmap page, matching the linked issue #4543.
Linked Issues check ✅ Passed The code changes successfully address the linked issue #4543 by adding styling classes (bg-white, border, shadow-md, etc.) to Goal divs in roadmap.tsx, which improves their visual appearance to match general web page styling conventions.
Out of Scope Changes check ✅ Passed All changes are scoped to the Roadmap page's Goal divs styling, directly addressing issue #4543 with no unrelated modifications to other components or logic.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Nov 6, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b5a86b7) to head (6077035).

Additional details and impacted files
@@            Coverage Diff            @@
##            master     #4545   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          780       780           
  Branches       144       144           
=========================================
  Hits           780       780           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@asyncapi-bot
Copy link
Contributor

asyncapi-bot commented Nov 6, 2025

⚡️ Lighthouse report for the changes in this PR:

Category Score
🔴 Performance 44
🟢 Accessibility 98
🟢 Best practices 92
🟢 SEO 100
🔴 PWA 33

Lighthouse ran on https://deploy-preview-4545--asyncapi-website.netlify.app/

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
pages/roadmap.tsx (1)

524-524: LGTM! Styling improvements look good.

The added Tailwind classes successfully create consistent card-based styling for all three Goal divs. The styling includes appropriate background, borders with dark mode support, rounded corners, padding, shadows, and flexbox layout.

Minor formatting note: Line 524 has a double space between bg-white and border, while lines 552 and 575 have single spaces. Consider normalizing to single spaces for consistency.

Apply this diff to fix the spacing on line 524:

-                <div className='bg-white  border border-gray-100 dark:border-gray-400 rounded-lg p-6 shadow-sm flex flex-col justify-start lg:h-full'>
+                <div className='bg-white border border-gray-100 dark:border-gray-400 rounded-lg p-6 shadow-sm flex flex-col justify-start lg:h-full'>

Also applies to: 552-552, 575-575

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b5a86b7 and 81a091e.

📒 Files selected for processing (1)
  • pages/roadmap.tsx (3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: asyncapi-bot
Repo: asyncapi/website PR: 0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
⏰ 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). (3)
  • GitHub Check: Lighthouse CI
  • GitHub Check: Test NodeJS PR - windows-latest
  • GitHub Check: Test NodeJS PR - macos-13

@erankitkr011 erankitkr011 changed the title [DESIGN]: Improve Styling of Goal Divs in Roadmap page #4543 style: improve styling of Goal divs in Roadmap page (#4543) Nov 6, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
pages/roadmap.tsx (1)

524-524: Fix double space in className strings.

There's a double space after bg-white in all three Goal divs. While this doesn't affect functionality, it should be cleaned up for consistency.

Apply this diff to remove the extra space:

-                <div className='bg-white  border border-gray-200 rounded-lg shadow-md p-6 flex flex-col justify-start lg:h-full'>
+                <div className='bg-white border border-gray-200 rounded-lg shadow-md p-6 flex flex-col justify-start lg:h-full'>

Apply the same fix to lines 552 and 575.

Also applies to: 552-552, 575-575

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 81a091e and 6077035.

📒 Files selected for processing (1)
  • pages/roadmap.tsx (3 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). (1)
  • GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (1)
pages/roadmap.tsx (1)

524-551: LGTM! Nice styling improvements.

The added Tailwind classes create a clean card-style appearance for the Goal divs. The styling is consistent across all three cards, and the responsive design with lg:h-full ensures equal heights on larger screens for a polished look.

Also applies to: 552-574, 575-598

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.

[DESIGN]: Improve Styling of Goal Divs in Roadmap page

2 participants