From 34b1399b65326ea0955673014a484448b67c18a6 Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <contact@mobula.io>
Date: Thu, 23 Jul 2026 00:15:39 +0200
Subject: [PATCH] share-card snapshot: fix title/subtitle overlap on wrapping
 text (satori flex quirk)

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

diff --git a/src/app/benchmarks/[slug]/share-card/route.tsx b/src/app/benchmarks/[slug]/share-card/route.tsx
index 115bc86e..12fd31a8 100644
--- a/src/app/benchmarks/[slug]/share-card/route.tsx
+++ b/src/app/benchmarks/[slug]/share-card/route.tsx
@@ -969,14 +969,23 @@ async function renderSnapshot(
             gap: 6,
           }}
         >
+          {/* Title + subtitle. Satori quirk: a bare `display: flex`
+              text div stays at one-line height even when the text
+              visually wraps, so the next sibling stacks on top of the
+              wrapped lines. Explicit `flexDirection: column` on each
+              text box forces satori to measure the wrapped content
+              height. maxWidth pins the wrap point below the container
+              width so long titles never touch the right edge. */}
           <div
             style={{
               display: "flex",
+              flexDirection: "column",
               fontSize: 48,
               fontWeight: 700,
               color: INK,
               letterSpacing: "-0.02em",
               lineHeight: 1.05,
+              maxWidth: 1086,
             }}
           >
             {benchmark.title}
@@ -984,8 +993,10 @@ async function renderSnapshot(
           <div
             style={{
               display: "flex",
+              flexDirection: "column",
               fontSize: 16,
               color: INK_SOFT,
+              lineHeight: 1.35,
               maxWidth: 980,
             }}
           >