feat(ui): improve partner grid layout on download page#8750
feat(ui): improve partner grid layout on download page#8750Shubham-1068 wants to merge 4 commits intonodejs:mainfrom
Conversation
|
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
This PR updates the Downloads page partner logo layout to center the partner grid and improve visual alignment/consistency across screen sizes, addressing #8749.
Changes:
- Updated the
.largepartner layout from an auto-fill, full-width-stretching grid to an auto-fit grid with bounded column widths. - Centered the resulting grid tracks within the container and adjusted spacing between items.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| w-full | ||
| grid-cols-[repeat(auto-fill,minmax(240px,1fr))] | ||
| gap-4; | ||
| grid-cols-[repeat(auto-fit,minmax(240px,260px))] |
There was a problem hiding this comment.
@canerakdas okay i will update the changes as per your recommendation
There was a problem hiding this comment.
@canerakdas @ovflowd i have fixed the above mentioned issue. Kindly review the changes
After Changes:
Additionally
I also fixed the remark-lint imports to match the current @node-core/doc-kit API, which was causing the packages/remark-lint unit tests to fail locally.
|
For context, the reason why it renders like that is because we only have 3 partners atm, whereas the grid was designed for up to 4, but wasn't designed to account for the fact we could have less than 4. |


Description
Centered the partner logos in the download page’s partner section by adjusting the grid layout for improved visual alignment and consistency.
Validation
Related Issues
Fixes #8749
Before changes:
After changes:
Files Changed
Code Changed
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.