From 69721c6afd388cb64e1c12600f5ecfca49b5974f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Wed, 29 Jul 2026 14:34:09 +0200
Subject: [PATCH] Stretch Trusted by tiles to equal row height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/components/MediaTile/MediaTile.tsx    | 33 ++++++++++---------
 .../src/components/MediaTile/variants.ts      |  5 ++-
 .../CompliancePortalReferenceListItem.tsx     |  2 +-
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/apps/compliance-portal/src/components/MediaTile/MediaTile.tsx b/apps/compliance-portal/src/components/MediaTile/MediaTile.tsx
index c3cdf12e9..1542bf748 100644
--- a/apps/compliance-portal/src/components/MediaTile/MediaTile.tsx
+++ b/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>
   );
 }
diff --git a/apps/compliance-portal/src/components/MediaTile/variants.ts b/apps/compliance-portal/src/components/MediaTile/variants.ts
index d78b70e8c..eddb122f4 100644
--- a/apps/compliance-portal/src/components/MediaTile/variants.ts
+++ b/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: {
diff --git a/apps/compliance-portal/src/components/TrustedBy/CompliancePortalReferenceListItem.tsx b/apps/compliance-portal/src/components/TrustedBy/CompliancePortalReferenceListItem.tsx
index e10faec9e..9e4cc8610 100644
--- a/apps/compliance-portal/src/components/TrustedBy/CompliancePortalReferenceListItem.tsx
+++ b/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"