Skip to content

Rework Conf 2026 sponsor sizing for clearer tier hierarchy#2404

Merged
martinbonnin merged 1 commit intographql:sourcefrom
jeanlucaslima:fix-sponsor-logo-sizing
May 7, 2026
Merged

Rework Conf 2026 sponsor sizing for clearer tier hierarchy#2404
martinbonnin merged 1 commit intographql:sourcefrom
jeanlucaslima:fix-sponsor-logo-sizing

Conversation

@jeanlucaslima
Copy link
Copy Markdown
Contributor

Closes #2403

Summary

The 2026 Sponsors section had inconsistent visual hierarchy: Gold and Silver logos rendered larger than Platinum because every non-Meta logo was forced into a fixed aspect-[3] box while Meta was constrained by aspect-video. Logos with internal SVG whitespace (Meta, airbnb) and logos with very different aspect ratios within the same tier (wide Apollo vs square ChilliCream) further compounded the imbalance.

This PR replaces the fixed-aspect approach with per-tier max-h / max-w envelopes plus optional per-logo overrides for cases where intrinsic aspect ratios make a single tier rule look unbalanced.

Changes

src/app/conf/2026/components/sponsors.tsx

  • Tier sizing uses Tailwind max-h-* max-w-* per tier with mobile + desktop breakpoints. Logos render at their natural aspect via object-contain capped by the envelope.
  • Added optional sizeOverride field on Sponsor so individual logos with extreme aspect ratios (square ChilliCream, stacked airbnb, small Grafast) can be tuned without raising the whole tier.
  • Switched the row layout from a 2-column grid to flex with justify-center so single-logo tiers (Platinum, Community, Bronze) center on the section instead of sitting in the left grid column.
  • Tier label is md:absolute on desktop so logos align to the section's true horizontal center, not centered relative to the post-label area.
  • Meta <img> no longer needs the aspect-video wrapper; the cropped SVG handles its own sizing.

SVG asset cleanup

  • Cropped internal whitespace from Meta.svg and Meta-dark.svg (viewBox="940 940 5100 1120").
  • Aligned airbnb.svg width/height attributes with the cropped viewBox so the logo fills its envelope without internal padding.
  • Added explicit width/height attributes to Chillicream.svg, airbnb.svg, Meta.svg, Meta-dark.svg so they have intrinsic dimensions when sized via max-h/max-w alone (previously these collapsed without the aspect-[3] wrapper).

Result

Visual hierarchy now reads Platinum > Gold > Silver/Community > Bronze at any viewport, and logos within a tier feel comparable in visual weight regardless of shape.

Test plan

  • Open /conf/2026/#sponsors and confirm tier hierarchy reads correctly
  • Verify all logos render in light and dark mode
  • Check at 375px, 768px, 1280px, 1920px viewports
  • Confirm hover state (subtle gray background) still appears on each logo tile

Replace the fixed `aspect-[3]` box with per-tier max-h/max-w envelopes
and per-logo overrides so visual hierarchy reads Platinum > Gold >
Silver/Community > Bronze regardless of each logo's intrinsic aspect
ratio.

- Switch row layout from 2-col grid to flex with justify-center so
  single-logo tiers (Platinum, Community, Bronze) center on the
  section instead of sitting in the left grid column.
- Position tier label absolutely on desktop so logos align to the
  section's true horizontal center, not the post-label area.
- Crop internal whitespace from Meta SVGs and align airbnb width/
  height to its cropped viewBox so logos fill their envelopes.
- Add intrinsic width/height to Chillicream, airbnb, and Meta SVGs
  so they have a defined size when sized via max-h/max-w alone.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 7, 2026

@jeanlucaslima is attempting to deploy a commit to the The GraphQL Foundation Team on Vercel.

A member of the Team first needs to authorize it.

@jeanlucaslima
Copy link
Copy Markdown
Contributor Author

Adding a before/after comparison:

image image

@jeanlucaslima
Copy link
Copy Markdown
Contributor Author

Focus was to give ChilliCream a visual equivalence because it is a more vertical logo

@martinbonnin martinbonnin merged commit 0a38914 into graphql:source May 7, 2026
4 of 5 checks passed
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.

Conf 2026 sponsor logos: inconsistent visual hierarchy across tiers

2 participants