feat(ui): improve partner grid layout on download page by Shubham-1068 · Pull Request #8750

feat(ui): improve partner grid layout on download page by Shubham-1068 · Pull Request #8750 · nodejs/nodejs.org

Conversation

Description

Centered the partner logos in the download page’s partner section by adjusting the grid layout for improved visual alignment and consistency.

Validation

Verified that partner logos are centered across different screen sizes
Checked consistent spacing and alignment of all items
No UI breakages observed

Related Issues

Fixes #8749

Before changes:

After changes:

Files Changed

nodejs.org\apps\site\components\Common\Partners\index.module.css

Code Changed

@reference "../../../styles/index.css";

.small {
  @apply flex
    flex-row
    flex-wrap
    items-center
    gap-2;
}

.large {
  @apply grid
    w-full
    grid-cols-[repeat(auto-fit,minmax(240px,260px))]
    justify-center
    gap-6;
}

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

Copilot AI review requested due to automatic review settings

March 21, 2026 00:43

👋 Codeowner Review Request

The 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! 🙏

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 .large partner 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))]

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be better to apply this change only for large(desktop) resolutions

Current;

With this change;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@canerakdas okay i will update the changes as per your recommendation

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

		@@ -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';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this correct? Seems wrong. I recall we switched from createQueries to { QUERIES }? cc @avivkeller

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes are not related to the objective of this PR.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@ovflowd i have made the required changes kindly review it

		.large {
		@apply grid
		w-full
		grid-cols-[repeat(auto-fill,minmax(240px,1fr))]

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should still have the grid fro small screens. Can you please change this to:

sm:grid-cols-[repeat(auto-fill,minmax(240px,1fr))]
sm:gap-4
lg:gap-6
lg:grid-cols-[repeat(auto-fit,minmax(240px,260px))]
lg:justify-center

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(or something like that, so extra small screens use vertical, but not so small ones use horizontal)

I'm also fine having it fully horizontal always, logos will just be small.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.27%. Comparing base (1dd8a0b) to head (adddbc1).
⚠️ Report is 4 commits behind head on main.
✅ All tests successful. No failed tests found.

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.
📢 Have feedback on the report? Share it here.