fix: #4381 Made View on Github and View Docs buttons correctly aligned on Generator page #4406
Conversation
namanjain24-sudo
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. |
WalkthroughRefactors the Adopters page into separate desktop table and mobile card views with responsive rendering and styling updates. Updates the Generator page’s button layout for responsive stacking/row behavior, removes the “Learn more” button, and adjusts button classNames. No public APIs changed. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User/Viewport
participant A as AdoptersPage
participant T as Tailwind CSS
U->>A: Load /casestudies
A->>T: Apply responsive classes (md:block/md:hidden)
alt Viewport ≥ md
A->>U: Render Desktop Table (thead/tbody, list of resource links)
else Viewport < md
A->>U: Render Mobile Cards (company, use case, resources)
end
sequenceDiagram
autonumber
participant U as User/Viewport
participant G as GeneratorPage
participant T as Tailwind CSS
U->>G: Load /tools/generator
G->>T: flex-col (small), md:flex-row, md:wrap
G-->>U: Render GitHub + View Docs buttons (no "Learn more")
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. ✨ 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. Comment |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4406--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 (5)
pages/tools/generator.tsx (1)
24-27: Minor width tweak (optional).To guarantee content-tight widths once buttons go side‑by‑side, consider
md:w-fitinstead ofmd:w-auto.Apply if desired:
- className='w-full text-center md:w-auto md:text-left' + className='w-full text-center md:w-fit md:text-left' ... - <Button text='View Docs' href='/docs/tools/generator' className='w-full text-center md:w-auto md:text-left' /> + <Button text='View Docs' href='/docs/tools/generator' className='w-full text-center md:w-fit md:text-left' />pages/casestudies/index.tsx (4)
85-116: Desktop table view: solid improvement; add column scopes and unify borders.For accessibility, add
scope="col"on headers. Also align border thickness for consistency.- <th className='border p-2 font-bold'>Company name</th> - <th className='border-2 p-2 font-bold'>Use Case</th> - <th className='border-2 p-2 font-bold'>Resources</th> + <th scope='col' className='border-2 p-2 font-bold'>Company name</th> + <th scope='col' className='border-2 p-2 font-bold'>Use Case</th> + <th scope='col' className='border-2 p-2 font-bold'>Resources</th>
96-113: Prefer stable keys over array indexes (desktop rows).Improves reconciliation and future reordering.
- <tr key={index} data-testid='Adopters'> + <tr key={entry.companyName} data-testid='Adopters'>
101-109: Use stable keys for resource items.Avoid
resourceIndex; use a unique field.- {entry.resources.map((resource: Resource, resourceIndex: number) => ( - <li key={resourceIndex}> + {entry.resources.map((resource: Resource) => ( + <li key={resource.link || resource.title}>- {entry.resources.map((resource: Resource, resourceIndex: number) => ( - <li key={resourceIndex}> + {entry.resources.map((resource: Resource) => ( + <li key={resource.link || resource.title}>Also applies to: 135-142
119-146: Stable keys for mobile cards.Same reasoning as desktop list.
- key={index} + key={entry.companyName}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/casestudies/index.tsx(1 hunks)pages/tools/generator.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
pages/tools/generator.tsx (2)
components/buttons/GithubButton.tsx (1)
GithubButton(22-45)components/buttons/Button.tsx (1)
Button(53-106)
⏰ 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 (2)
pages/tools/generator.tsx (1)
21-28: Responsive button group: LGTM.The new flex container and md+/lg+ justify rules achieve the intended stacking/row alignment across breakpoints. Button classNames are consistent.
pages/casestudies/index.tsx (1)
117-146: Mobile card view: LGTM.Clear labels and spacing; responsive split is straightforward and readable.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4406 +/- ##
=========================================
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:
|
|
@namanjain24-sudo can you please share the difference between them |
Thank You @sambhavgupta0705 for your review but this issue is already closed and have been fixed . Sorry for the inconvenience caused . |
3 participants
Description
Related issue(s)
#4381 : View on Github and View Docs buttons correctly aligned on Generator page .
Summary by CodeRabbit