From a4c2ab226a63d9261ab299b400eb469ad2507f1b Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Thu, 5 Nov 2026 16:12:28 -0300
Subject: [PATCH] =?UTF-8?q?fix(site):=20limita=20o=20t=C3=ADtulo=20do=20bo?=
 =?UTF-8?q?ard=20e=20remove=20text-balance=20dos=20cards=20(S47)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

O card em destaque perdeu o line-clamp-3 na reescrita da S47: com o feed do Instagram na frente, a legenda inteira (889 caracteres no caso real) era renderizada a 31px e esticava o board. Restaura o clamp de 3 linhas no destaque, mantém o clamp do compacto, troca text-balance por break-words (balance quebra o line-clamp em alguns browsers) e adiciona min-w-0 às colunas do grid. O e2e passa a pinar o clamp do card em destaque, não só o do compacto.
---
 src/components/CampaignContentCard.tsx    | 6 +++---
 src/components/CampaignContentSection.tsx | 4 ++--
 tests/e2e/frontend.e2e.spec.ts            | 6 +++++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/CampaignContentCard.tsx b/src/components/CampaignContentCard.tsx
index f39af49d..30a1628f 100644
--- a/src/components/CampaignContentCard.tsx
+++ b/src/components/CampaignContentCard.tsx
@@ -59,7 +59,7 @@ export const CampaignContentCard = ({ card, variant = 'compact' }: CampaignConte
         ) : null}
       </div>
       <p className="mt-4 text-xs font-bold text-(--pt-red) lg:mt-5">{card.meta}</p>
-      <h3 className="mt-2 max-w-[690px] font-[family-name:var(--font-exo2)] text-[25px] leading-[1.12] font-extrabold tracking-[-0.02em] text-balance lg:text-[31px] lg:leading-[1.1] lg:tracking-[-0.025em]">
+      <h3 className="mt-2 line-clamp-3 max-w-[690px] font-[family-name:var(--font-exo2)] text-[25px] leading-[1.12] font-extrabold tracking-[-0.02em] break-words lg:text-[31px] lg:leading-[1.1] lg:tracking-[-0.025em]">
         {card.title}
       </h3>
       {card.subtitle ? (
@@ -74,7 +74,7 @@ export const CampaignContentCard = ({ card, variant = 'compact' }: CampaignConte
   ) : (
     <>
       <p className="text-xs font-bold text-(--pt-red)">{card.meta}</p>
-      <h3 className="mt-3 line-clamp-3 font-[family-name:var(--font-exo2)] text-xl leading-[1.18] font-extrabold tracking-[-0.02em] text-balance lg:text-[23px] lg:leading-[1.16]">
+      <h3 className="mt-3 line-clamp-3 font-[family-name:var(--font-exo2)] text-xl leading-[1.18] font-extrabold tracking-[-0.02em] break-words lg:text-[23px] lg:leading-[1.16]">
         {card.title}
       </h3>
       <p className="mt-4 text-sm font-bold text-(--pt-red)">
@@ -84,7 +84,7 @@ export const CampaignContentCard = ({ card, variant = 'compact' }: CampaignConte
   )
 
   return (
-    <div className="group relative h-full">
+    <div className="group relative h-full min-w-0">
       {card.external ? (
         <a
           href={card.href}
diff --git a/src/components/CampaignContentSection.tsx b/src/components/CampaignContentSection.tsx
index da4f2e91..8792d2eb 100644
--- a/src/components/CampaignContentSection.tsx
+++ b/src/components/CampaignContentSection.tsx
@@ -174,10 +174,10 @@ export const CampaignContentSection = async () => {
 
         {featured ? (
           <div className="mt-8 grid border-y border-(--campaign-line) lg:mt-10 lg:grid-cols-12">
-            <article className="border-b border-(--campaign-line) py-7 lg:col-span-7 lg:border-r lg:border-b-0 lg:pr-8">
+            <article className="min-w-0 border-b border-(--campaign-line) py-7 lg:col-span-7 lg:border-r lg:border-b-0 lg:pr-8">
               <CampaignContentCard card={featured} variant="featured" />
             </article>
-            <div className="divide-y divide-(--campaign-line) lg:col-span-5 lg:pl-8">
+            <div className="min-w-0 divide-y divide-(--campaign-line) lg:col-span-5 lg:pl-8">
               {rest.map((card) => (
                 <article key={card.id}>
                   <CampaignContentCard card={card} variant="compact" />
diff --git a/tests/e2e/frontend.e2e.spec.ts b/tests/e2e/frontend.e2e.spec.ts
index ebf23983..25096c6d 100644
--- a/tests/e2e/frontend.e2e.spec.ts
+++ b/tests/e2e/frontend.e2e.spec.ts
@@ -666,7 +666,11 @@ test.describe('Campaign home content section', () => {
 
       // Long captions are clamped with an ellipsis so a single post cannot
       // stretch the bento row (production captions run into hundreds of
-      // characters; the stub's reel caption is deliberately long).
+      // characters; the stub's reel caption is deliberately long). The
+      // featured title must clamp too — it is the lead of the board and the
+      // one that renders at the largest type size.
+      await expect(featured.locator('h3')).toHaveCSS('-webkit-line-clamp', '3')
+      await expect(featured.locator('h3')).toHaveCSS('overflow', 'hidden')
       const longCaptionTitle = section
         .getByRole('link', { name: /E2e Reel da caravana/ })
         .locator('h3')