fix(ui): show up to 12 partner logos and fix width#8993
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview PartnersList raises Reviewed by Cursor Bugbot for commit a2e64a0. Bugbot is set up for automated code reviews on this repo. Configure here. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8993 +/- ##
==========================================
- Coverage 75.41% 75.35% -0.06%
==========================================
Files 98 98
Lines 8636 8636
Branches 318 319 +1
==========================================
- Hits 6513 6508 -5
- Misses 2119 2124 +5
Partials 4 4 ☔ View full report in Codecov by Harness. |
|
requesting fast track to avoid confusion |
There was a problem hiding this comment.
Pull request overview
This PR updates the homepage partners “small” list rendering so all current partners can appear (by increasing the truncation limit) and improves the visual consistency/alignment of partner logo buttons across viewports.
Changes:
- Increase the small partners truncation limit from 6 to 12 so current partners aren’t omitted due to truncation.
- Center-align the wrapped small partners row layout with
justify-center. - Cap small partner SVG max width (
max-w-4) to prevent overly wide logos from stretching their button.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| apps/site/components/Common/Partners/index.tsx | Raises the small partners list limit to 12 when no explicit length is provided. |
| apps/site/components/Common/Partners/index.module.css | Centers the small partners flex-wrap layout to keep wrapped rows visually balanced. |
| apps/site/components/Common/Partners/PartnerButton/index.module.css | Adds a max-width cap to small SVG logos to normalize button widths for wide marks. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
bmuenzenmeyer
left a comment
There was a problem hiding this comment.
Glad this is simple and cosmetic. Good call.
#7991 (comment) and https://github.com/nodejs/nodejs.org/blob/main/docs/partners.md#adding-or-removing-partners make clear that content inclusion-exclusion decisions are not the scope of the website team, and usually come from events like #8973
|
That was actually done intentionally when that part was developed. I don't remember the exact details, but I think it was one of the requirements. |
Description
The home page hero renders the small partner list from a weighted shuffle whose
seed changes every 5 minutes, then truncates it to the first 6 entries. With 9
partners in
constants.json, each render dropped 3 of them — so depending onwhen (or from which cached render) you loaded the page, a given partner's logo
was simply missing. Some wide logos (≈2.2:1 aspect ratio) also rendered about
twice as wide as the roughly square marks next to them. The defined
weightin
constants.jsondid not impact the width of the logo as still doesn't.Changes
SMALL_PARTNER_LIMITfrom 6 to 12 so all current partners alwaysrender; the weighted shuffle still impacts the sort order.
justify-centerto the small partner list so rows stay centered whenthe icons wrap on different viewports.
max-w-4to the small partner button SVG. Since the logos have aviewBox, wide marks scale down proportionally to fit the cap instead ofstretching their button, so all partner buttons render at a uniform width.
Validation
Before
After
Related Issues
None
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.