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.
I think it would be better to apply this change only for large(desktop) resolutions
Current;
With this change;
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:
|
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. |
This comment was marked as off-topic.
This comment was marked as off-topic.
| @@ -1,4 +1,4 @@ | |||
| import { QUERIES } from '@node-core/doc-kit/src/utils/queries/index.mjs'; | |||
| import createQueries from '@node-core/doc-kit/src/utils/queries/index.mjs'; | |||
There was a problem hiding this comment.
Is this correct? Seems wrong. I recall we switched from createQueries to { QUERIES }? cc @avivkeller
There was a problem hiding this comment.
These changes are not related to the objective of this PR.
ovflowd
left a comment
ovflowd
left a comment
There was a problem hiding this comment.
I have the feeling you accidentally added unrelated changes to this PR.
|
@ovflowd Actually when i ran the test command locally before pushing the changes it was failing at that time, but it was a local issue and now i see that i accidentally pushed those changes too. So i am reverting those changes while sticking to the original issue i.e, only the grid layout improvements. Sorry for this confusion. |
Shubham-1068
force-pushed
the
download-partners-ui-improvement
branch
from
d29fcc8 to
adddbc1
Compare
|
@ovflowd i have made the required changes kindly review it |
github-actions
bot
removed
the
github_actions:pull-request
|
Lighthouse Results
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8750 +/- ##
=======================================
Coverage 75.27% 75.27%
=======================================
Files 105 105
Lines 9242 9242
Branches 326 326
=======================================
Hits 6957 6957
Misses 2283 2283
Partials 2 2 ☔ View full report in Codecov by Sentry. |
…ss on small screens too
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.