fix(BasePagination): fix pagination list item vertical alignment (8639)#8640
fix(BasePagination): fix pagination list item vertical alignment (8639)#8640mertssmnoglu wants to merge 3 commits intonodejs:mainfrom
Conversation
Signed-off-by: Mert Şişmanoğlu <mertssmnoglu@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
There was a problem hiding this comment.
Pull request overview
Fixes inconsistent vertical alignment of BasePagination items by locally overriding a global list-item top-margin rule that was affecting pagination list elements on the blog page.
Changes:
- Add a wrapper class to the pagination
<li>element. - Introduce a CSS module rule to reset
margin-topon pagination list items.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/ui-components/src/Common/BasePagination/PaginationListItem/index.tsx | Applies a new wrapper class to the <li> element in pagination items. |
| packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css | Adds .listItemWrapper to override leaked global list spacing impacting pagination alignment. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/ui-components/src/Common/BasePagination/PaginationListItem/index.tsx
Outdated
Show resolved
Hide resolved
packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
Outdated
Show resolved
Hide resolved
Signed-off-by: Mert Şişmanoğlu <mertssmnoglu@gmail.com>
packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
Outdated
Show resolved
Hide resolved
ovflowd
left a comment
There was a problem hiding this comment.
SGTM, although this bug must be new, cause it wasn't there before 😅
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8640 +/- ##
=======================================
Coverage 75.11% 75.11%
=======================================
Files 104 104
Lines 9094 9094
Branches 314 314
=======================================
Hits 6831 6831
Misses 2261 2261
Partials 2 2 ☔ View full report in Codecov by Sentry. |
Signed-off-by: Mert Şişmanoğlu <mertssmnoglu@gmail.com>
|
Applied same visual fix with a one-liner. |
Description
Added a
.listItemWrapperCSS class that resets margin-top withmt-0!to override the global rule.Validation
Old
Dark theme
Light theme
New
Dark theme
Light theme
Related Issues
Addresses #8639
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.