Stretch Trusted by tiles to equal row height

When a reference name wraps to two lines, sibling cards in the
same grid row stayed shorter because MediaTile only sized to its
content. Fill the grid cell and grow the caption so peers match.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/src/components/MediaTile/MediaTile.tsx

@@ -55,25 +55,28 @@ export function MediaTile({ media, label, variant = "icon", backdropSrc }: Media
       variant="soft"
       size={3}
       padding="none"
+      className="h-full"
       onPointerMove={parallax ? onBackdropPointerMove : undefined}
       onPointerLeave={parallax ? onBackdropPointerLeave : undefined}
     >
-      <div className={slots.media()} {...(parallax ? backdropFrameProps("logoTile") : undefined)}>
-        {backdropSrc != null
-          ? (
-              <img
-                src={backdropSrc}
-                alt=""
-                aria-hidden
-                className={blurBackdropClassName("logoTile")}
-                style={blurBackdropStyle("logoTile")}
-              />
-            )
-          : <div className={slots.backdrop()} style={dotPatternStyle} />}
-        <div className={slots.backdropFade()} />
-        <div className={slots.mediaContent()}>{media}</div>
+      <div className={slots.body()}>
+        <div className={slots.media()} {...(parallax ? backdropFrameProps("logoTile") : undefined)}>
+          {backdropSrc != null
+            ? (
+                <img
+                  src={backdropSrc}
+                  alt=""
+                  aria-hidden
+                  className={blurBackdropClassName("logoTile")}
+                  style={blurBackdropStyle("logoTile")}
+                />
+              )
+            : <div className={slots.backdrop()} style={dotPatternStyle} />}
+          <div className={slots.backdropFade()} />
+          <div className={slots.mediaContent()}>{media}</div>
+        </div>
+        <div className={slots.caption()}>{label}</div>
       </div>
-      <div className={slots.caption()}>{label}</div>
     </Card>
   );
 }

apps/compliance-portal/src/components/MediaTile/variants.ts

@@ -28,11 +28,14 @@ import { tv } from "tailwind-variants/lite";
 // of the logo as the backdrop. Slots are shared by the shell and its skeleton.
 export const mediaTile = tv({
   slots: {
+    // Inner column fills the Card height so grid peers stretch evenly when a
+    // caption wraps; flex-1 on caption absorbs the leftover space.
+    body: "flex h-full flex-col",
     media: "relative flex w-full items-center justify-center overflow-hidden border-b border-sand-a2",
     backdrop: "pointer-events-none absolute inset-0",
     backdropFade: "pointer-events-none absolute inset-0 bg-linear-to-b from-sand-1/0 to-sand-1",
     mediaContent: "relative z-1 flex size-16 items-center justify-center [&_img]:size-full [&_img]:object-contain",
-    caption: "flex w-full items-center justify-center px-4 py-3",
+    caption: "flex w-full flex-1 items-center justify-center px-4 py-3",
   },
   variants: {
     variant: {

apps/compliance-portal/src/components/TrustedBy/CompliancePortalReferenceListItem.tsx

@@ -46,7 +46,7 @@ export function CompliancePortalReferenceListItem({ referenceKey }: CompliancePo
 
   return (
     <a
-      className="block"
+      className="block h-full"
       href={externalHref(reference.websiteUrl)}
       target="_blank"
       rel="noopener noreferrer"