-
-
Notifications
You must be signed in to change notification settings - Fork 900
fix: misaligned-nav-box #4094
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: misaligned-nav-box #4094
Conversation
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
|
There was a problem hiding this 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.
✅ 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:
|
There was a problem hiding this 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)
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 theLink
component (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-auto
to allow flex items to stretch
By removingh-auto
from 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-full
on the inner card to fill its container
Applyingh-full
to the clickable<div>
guarantees it spans the full height of its parent, keeping both navigation cards consistently aligned.
54-54
: Removedh-auto
from Next link for the “Up Next” card
Dropping theh-auto
class here complements theh-full
on 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