Skip to content

feat(ui): improve partner grid layout on download page#8750

Open
Shubham-1068 wants to merge 4 commits intonodejs:mainfrom
Shubham-1068:download-partners-ui-improvement
Open

feat(ui): improve partner grid layout on download page#8750
Shubham-1068 wants to merge 4 commits intonodejs:mainfrom
Shubham-1068:download-partners-ui-improvement

Conversation

@Shubham-1068
Copy link

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:

Screenshot 2026-03-21 055018

After changes:

Screenshot 2026-03-21 053611

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.

@Shubham-1068 Shubham-1068 requested a review from a team as a code owner March 21, 2026 00:43
Copilot AI review requested due to automatic review settings March 21, 2026 00:43
@vercel
Copy link

vercel bot commented Mar 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nodejs-org Ready Ready Preview Mar 21, 2026 7:42pm

Request Review

@github-actions
Copy link
Contributor

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

Copy link
Contributor

Copilot AI left a comment

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))]
Copy link
Member

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;
Image

With this change;

Image

Copy link
Member

Choose a reason for hiding this comment

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

Agreed

Copy link
Author

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

Copy link
Author

@Shubham-1068 Shubham-1068 Mar 21, 2026

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:

image image

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.

@ovflowd
Copy link
Member

ovflowd commented Mar 21, 2026

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.

@canerakdas

This comment was marked as off-topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve alignment of partner logos in Downloads section

6 participants