fix: misaligned-nav-box #4094
fix: misaligned-nav-box #4094
Conversation
itzraghavv
requested review from
derberg,
akshatnema,
anshgoyalevil,
sambhavgupta0705,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe changes update the height-related CSS utility classes in the DocsButton component. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DocsButton
User->>DocsButton: View navigation buttons ("GO BACK", "UP NEXT")
DocsButton-->>User: Render buttons with updated height alignment
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. 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!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #4094 +/- ##
=========================================
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:
|
![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/buttons/DocsButton.tsx (1)
25-27: (Optional) Enhance accessibility by using semantic<a>tags
Currently, interactive regions are<div>s wrapped inLink, which may not be keyboard-focusable or properly announced by screen readers. Consider:
- In Next.js 13+, move
className(includingh-full) directly onto theLinkcomponent (it renders an<a>by default).- Or wrap card contents in an
<a>(withpassHref) insideLink, ensuring proper semantics, focusability, and SEO.Also applies to: 56-58
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/buttons/DocsButton.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 180000ms (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (3)
components/buttons/DocsButton.tsx (3)
21-21: Great fix: removedh-autoto allow flex items to stretch
By removingh-autofrom both wrapper<div>s, you leverage the parent flex container’s defaultalign-items: stretch, ensuring the “Go Back” and “Up Next” cards match height.Also applies to: 52-52
25-25: Addedh-fullon the inner card to fill its container
Applyingh-fullto the clickable<div>guarantees it spans the full height of its parent, keeping both navigation cards consistently aligned.
54-54: Removedh-autofrom Next link for the “Up Next” card
Dropping theh-autoclass here complements theh-fullon the inner<div>, ensuring the clickable area occupies the full card height.
|
/rtm |
Co-authored-by: raghav-97 <[email protected]> Co-authored-by: Rohit <[email protected]> Co-authored-by: Akshat Nema <[email protected]>
Description
This PR ensures that the "Go Back" and "Up Next" cards have equal height for a more consistent and visually balanced appearance
Related issue(s)
Resolves #4089
Summary by CodeRabbit