From 2e21d0f5f0515d5f2ea4d0359e888600556e80fe Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <contact@mobula.io>
Date: Fri, 17 Jul 2026 17:50:15 +0200
Subject: [PATCH 1/2] share-card: flexShrink:0 on title+subtitle to stop Satori
 collapsing them under sibling flex:1

---
 src/app/benchmarks/[slug]/share-card/route.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/benchmarks/[slug]/share-card/route.tsx b/src/app/benchmarks/[slug]/share-card/route.tsx
index 03fa36f7..576f29c7 100644
--- a/src/app/benchmarks/[slug]/share-card/route.tsx
+++ b/src/app/benchmarks/[slug]/share-card/route.tsx
@@ -688,6 +688,7 @@ async function renderRanking(
               color: INK,
               letterSpacing: "-0.02em",
               lineHeight: 1.05,
+              flexShrink: 0,
             }}
           >
             {benchmark.title}
@@ -699,6 +700,7 @@ async function renderRanking(
               color: INK_SOFT,
               lineHeight: 1.3,
               maxWidth: 980,
+              flexShrink: 0,
             }}
           >
             Product ranking by p50 · {benchmark.metric}.
@@ -832,6 +834,7 @@ async function renderLeaderboard(
               color: INK,
               letterSpacing: "-0.02em",
               lineHeight: 1.05,
+              flexShrink: 0,
             }}
           >
             {benchmark.title}
@@ -842,6 +845,7 @@ async function renderLeaderboard(
               fontSize: 16,
               color: INK_SOFT,
               marginTop: 2,
+              flexShrink: 0,
             }}
           >
             {subtitleLB}
@@ -1012,6 +1016,7 @@ async function renderSnapshot(
               color: INK,
               letterSpacing: "-0.02em",
               lineHeight: 1.05,
+              flexShrink: 0,
             }}
           >
             {benchmark.title}
@@ -1022,6 +1027,7 @@ async function renderSnapshot(
               fontSize: 16,
               color: INK_SOFT,
               maxWidth: 980,
+              flexShrink: 0,
             }}
           >
             {benchmark.subtitle}
@@ -1313,6 +1319,7 @@ async function renderCompare(
               color: INK,
               letterSpacing: "-0.02em",
               lineHeight: 1.05,
+              flexShrink: 0,
             }}
           >
             {benchmark.title} · top 2

From b8d55e63fb9e817f7ed1c71126c484815d923663 Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <contact@mobula.io>
Date: Fri, 17 Jul 2026 17:55:23 +0200
Subject: [PATCH 2/2] share-card: cap leaderboard top 10 + flex-start (fix
 overflow overlapping title on wide cohorts)

---
 src/app/benchmarks/[slug]/share-card/route.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/benchmarks/[slug]/share-card/route.tsx b/src/app/benchmarks/[slug]/share-card/route.tsx
index 576f29c7..54e3f34e 100644
--- a/src/app/benchmarks/[slug]/share-card/route.tsx
+++ b/src/app/benchmarks/[slug]/share-card/route.tsx
@@ -811,9 +811,13 @@ async function renderLeaderboard(
   colors: Map<string, string>,
   chainLabel?: string | null
 ) {
-  const sorted = sortByP50(benchmark);
+  const sorted = sortByP50(benchmark).slice(0, 10);
   const maxP50 = Math.max(...sorted.map((r) => r.ms.p50)) || 1;
-  const subtitleLB = `Ranked by p50 · ${benchmark.metric}.`;
+  const total = benchmark.results.length;
+  const subtitleLB =
+    total > sorted.length
+      ? `Top ${sorted.length} of ${total} · ranked by p50 · ${benchmark.metric}.`
+      : `Ranked by p50 · ${benchmark.metric}.`;
 
   return new ImageResponse(
     (
@@ -856,7 +860,7 @@ async function renderLeaderboard(
               display: "flex",
               flexDirection: "column",
               flex: 1,
-              justifyContent: "center",
+              justifyContent: "flex-start",
               gap: 14,
               marginTop: 18,
             }}