Rework Conf 2026 sponsor sizing for clearer tier hierarchy (#2404)

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

Author: jeanlucaslima

public/img/conf/Sponsors/Chillicream.svg

@@ -14,32 +14,29 @@ interface Sponsor {
     | React.FC<React.HTMLAttributes<HTMLDivElement>>
   name: string
   link: string
+  // Per-logo size override appended after the tier classes; use sparingly to
+  // even out logos with extreme aspect ratios within the same tier.
+  sizeOverride?: string
 }
 
 const sponsorPlatinum: Sponsor[] = [
   {
-    icon: (props: React.HTMLAttributes<HTMLDivElement>) => (
-      // When attempting to render the Meta logo with SVGR, the image becomes
-      // corrupted (something to do with a `clip-path`?); this means we need to
-      // render as an `<img>` and prevents us updating the viewBox.
-      <div
-        {...props}
-        className={clsx(props.className, "relative aspect-video flex-shrink-0")}
-      >
+    icon: ({ className }: React.HTMLAttributes<HTMLElement>) => (
+      <>
         <img
           src={
             new URL("/public/img/conf/Sponsors/Meta.svg", import.meta.url).href
           }
-          className="absolute inset-0 size-full object-contain dark:hidden"
+          className={clsx(className, "dark:hidden")}
         />
         <img
           src={
             new URL("/public/img/conf/Sponsors/Meta-dark.svg", import.meta.url)
               .href
           }
-          className="absolute inset-0 hidden size-full object-contain dark:block"
+          className={clsx(className, "hidden dark:block")}
         />
-      </div>
+      </>
     ),
     name: "Meta",
     link: "https://about.facebook.com/meta/",
@@ -101,6 +98,8 @@ const sponsorSilver: Sponsor[] = [
     ),
     name: "Chillicream",
     link: "https://chillicream.com/",
+    // Square logo — needs more height to feel comparable to wide silver logos.
+    sizeOverride: "md:max-h-36 md:max-w-[200px]",
   },
 ]
 
@@ -118,16 +117,17 @@ const sponsorBronze: Sponsor[] = [
     ),
     name: "Grafast",
     link: "https://grafast.org/",
+    sizeOverride: "md:max-h-[72px] md:max-w-[280px]",
   },
 ]
 
 const sponsorCommunity: Sponsor[] = [
   {
-    icon: (props: React.SVGProps<SVGElement>) => (
-      <Airbnb {...props} viewBox="567 570 1979.77 660.012" />
-    ),
+    icon: (props: React.SVGProps<SVGElement>) => <Airbnb {...props} />,
     name: "Airbnb",
     link: "https://www.airbnb.com/",
+    // Tall stacked logo — bump height to match silver visual weight.
+    sizeOverride: "md:max-h-[76px] md:max-w-[230px]",
   },
 ]
 
@@ -139,33 +139,42 @@ interface Tier {
   rank: number
   name: string
   items: Sponsor[]
+  logoClass: string
 }
 
+// Tier envelopes: cap glyph height and width per breakpoint so visual hierarchy
+// stays Platinum > Gold > Silver/Community > Bronze regardless of each logo's
+// intrinsic aspect ratio.
 const sponsorTiers: Tier[] = [
   {
     rank: 0,
     name: "Platinum",
     items: sponsorPlatinum,
+    logoClass: "max-h-20 max-w-[320px] md:max-h-24 md:max-w-[420px]",
   },
   {
     rank: 1,
     name: "Gold",
     items: sponsorGold,
+    logoClass: "max-h-16 max-w-[260px] md:max-h-24 md:max-w-[340px]",
   },
   {
     rank: 2,
     name: "Silver",
     items: sponsorSilver,
+    logoClass: "max-h-14 max-w-[220px] md:max-h-[76px] md:max-w-[280px]",
   },
   {
     rank: 2,
     name: "Open Source Community Sponsor",
     items: sponsorCommunity,
+    logoClass: "max-h-14 max-w-[220px] md:max-h-[76px] md:max-w-[280px]",
   },
   {
     rank: 3,
     name: "Bronze",
     items: sponsorBronze,
+    logoClass: "max-h-12 max-w-[200px] md:max-h-16 md:max-w-[240px]",
   },
 ]
 
@@ -176,42 +185,36 @@ export function Sponsors({ heading }: SponsorsProps) {
 
       <div className="mt-10 md:mt-16">
         {sponsorTiers.map(
-          tier =>
-            tier.items.length > 0 && (
-              <Tier
-                key={tier.name}
-                tier={tier}
-                logoHeight={(7 - tier.rank) * 32}
-              />
-            ),
+          tier => tier.items.length > 0 && <Tier key={tier.name} tier={tier} />,
         )}
       </div>
     </section>
   )
 }
 
-function Tier({ tier, logoHeight }: { tier: Tier; logoHeight: number }) {
+function Tier({ tier }: { tier: Tier }) {
   return (
-    <div className="flex gap-x-12 gap-y-4 border-t border-neu-200 py-4 pb-12 dark:border-neu-50 max-md:flex-col">
-      <h3 className="flex w-[80px] shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-pri-base">
+    <div className="relative flex gap-y-4 border-t border-neu-200 py-4 pb-12 dark:border-neu-50 max-md:flex-col">
+      <h3 className="flex shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-pri-base md:absolute md:left-0 md:top-4">
         <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
         {tier.name}
       </h3>
-      <div className="flex min-w-[70%] flex-wrap justify-center gap-y-4 pt-6 lg:grid lg:w-full lg:grid-cols-2 lg:gap-4">
-        {tier.items.map(({ link, icon: Icon, name }, i) => (
+      <div className="flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-4 pt-6 lg:gap-x-20">
+        {tier.items.map(({ link, icon: Icon, name, sizeOverride }, i) => (
           <a
             key={i}
             href={link}
             target="_blank"
             rel="noreferrer"
             title={name}
-            className="group flex min-h-24 grow items-center justify-center hover:bg-neu-500/10 dark:opacity-90 dark:hover:opacity-100 md:basis-1/2"
+            className="group flex min-h-24 items-center justify-center px-6 hover:bg-neu-500/10 dark:opacity-90 dark:hover:opacity-100"
           >
             <Icon
-              className="aspect-[3] w-auto max-w-[80%] shrink-0"
-              style={{
-                height: logoHeight,
-              }}
+              className={clsx(
+                "h-auto w-auto shrink-0 object-contain",
+                tier.logoClass,
+                sizeOverride,
+              )}
             />
           </a>
         ))}