fix: adjust logo sizing on about page

[vladh]

🔗 Linked issue

N/A

🧭 Context

Currently, the logo grid on the about page has some issues.

First, the hover background is uneven, and in some parts is close to colliding with the logos. In particular, look at the lack of horizontal spacing on the Vercel logo, and the general lack of spacing on the Open Source Pledge logo.

Screenshots

Secondly, some logos are much bigger than others, which makes them look out of place, and also makes the whole grid more irregular. Look at the Nuxt and Vue.js logos, and how big they are relative to the logos above and below them.

Screenshots

📚 Description

I added more padding to all of the logos.

I replaced the previous per-logo padding-block adjustment with a more reliable per-logo max-height adjustment. This makes it easier to make the logos look consistent with each other.

I added a negative horizontal margin to the logo container, so that logos are flush with the left and right edges.

I generally adjusted all dimensions to make the logos look better.

cc @alexdln 🙏🏻

Before and after, no hover

Before

After

Before and after, with hover background (all hover effects enabled for illustration)

Before

After

Before and after on mobile

Before

After

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Mar 7, 2026 11:37pm
npmx.dev (canary)	Ready	Preview, Comment	Mar 7, 2026 11:37pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Mar 7, 2026 11:37pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[vladh]

Test failures seem unrelated.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: cced42b3-fa59-4876-8052-6975f7ec135b

📥 Commits

Reviewing files that changed from the base of the PR and between eb87280 and 6864757.

📒 Files selected for processing (4)

• app/assets/logos/sponsors/index.ts
• app/components/About/LogoImg.vue
• app/components/About/LogoList.vue
• app/pages/about.vue

✅ Files skipped from review due to trivial changes (3)

• app/assets/logos/sponsors/index.ts
• app/components/About/LogoImg.vue
• app/pages/about.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/About/LogoList.vue

---

📝 Walkthrough

Summary by CodeRabbit

Release Notes

Style

• Adjusted sponsor logo vertical spacing for improved visual balance
• Redesigned sponsor section layout with responsive auto-fill grid sizing and dynamic gap spacing
• Enhanced OSS partner section layout with optimised responsive grid configuration
• Improved logo image scaling to fit containers proportionally while maintaining aspect ratios

Walkthrough

Updates Netlify sponsor logo configuration and refactors logo display components across the about page. Changes introduce responsive grid layouts, adjust sizing utilities, and modify component type definitions to use maxHeight instead of normalisingIndent for layout control.

Changes

Cohort / File(s)	Summary
Sponsor Configuration app/assets/logos/sponsors/index.ts	Updated Netlify sponsor entry's normalisingIndent from '0.125rem' to '0.25rem' to adjust Y-axis logo spacing.
Logo Display Components app/components/About/LogoList.vue, app/components/About/LogoImg.vue	Restructured LogoList template with responsive grid layouts replacing flex wrapping; changed BaseItem type from normalisingIndent?: string to maxHeight?: string. Updated LogoImg to use w-full object-contain sizing across all render branches for consistent responsive scaling.
About Page Layout app/pages/about.vue	Replaced fixed grid and flex containers with responsive grid-cols-[repeat(auto-fill,minmax(...))] layouts using grid-flow-row-dense for both Sponsors (160px minimum) and OSS partners (64px minimum) sections.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adjusting logo sizing on the about page, which directly addresses the issues of uneven spacing and inconsistent sizing documented in the description.
Description check	✅ Passed	The description comprehensively explains the issues (uneven hover backgrounds, inconsistent logo sizes) and the solutions implemented (padding adjustments, max-height replacements, negative margins, dimension adjustments) with supporting before/after screenshots.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[alexdln]

They had fixed sizes specifically for consistency in effects. When one element has a hover height of 60px, and the next one has a hover height of 40px, it looks like a bug (and is a bit inconvenient for navigation).

To compensate for this alignment, normalizingIndent was added to the logo settings.

The voidzero group is a special case, since this appearance and such indentations are a strict correspondence to how this group was styled by the authors of the project

Maybe we should make the vertical height bigger for all items (equal for each, but bigger, f.e. not h-11 but h-15), but about the other edits - it seems to me that this is trading one problem for another

P.S. A few tips: create new branches instead of working in main - this will make future support easier for both you and the maintainers. Also, use details for long screenshots (click edit on the comment to see how it works)

[vladh]

When one element has a hover height of 60px, and the next one has a hover height of 40px, it looks like a bug (and is a bit inconvenient for navigation).

Okay! I'll leave this up to your judgement. For me, it's much more important for each logo to look good together with its hover background, since, when hovering, they are both visible at the same time. It's the near-collision between the logo and the edge of the hover background that jumps out as a bug to me personally.

It's true that my change makes the hover background of the different logos differently sized, but in my opinion this is more difficult to notice, because no two hover backgrounds are visible at the same time.

[alexdln]

@vladh What do you think about change the effect to scale-120? It will have the same transition as the avatars below, and we'll eliminate the problems with different effects and different sizes for each logo

[vladh]

@vladh What do you think about change the effect to scale-120? It will have the same transition as the avatars below, and we'll eliminate the problems with different effects and different sizes for each logo

Sorry, I didn't quite get this. I'm not sure what you mean by “the effect” that should be changed, and it's also not clear to me what scaling things up would do. If you can describe this more specifically, I'm happy to try it out.

[alexdln]

Sorry for the long wait, but I couldn't find a suitable solution that would both preserve your comments and improve the interface to my thoughts. It seems like the current version is a good combination of our ideas. Let me know if you have any thoughts or if it still doesn't seem to work to you

[vladh]

@alexdln I think this is a great solution! Thanks for figuring this out. 😊 ❤️