fsolla/teqo-backup
1
0
Fork 0
mirror of https://github.com/fsolla/teqo.git synced 2026-11-12 22:13:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(site): limita o título do board e remove text-balance dos cards (S47)

Browse source 
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.
This commit is contained in:
Francisco Solla 2026-11-05 16:12:28 -03:00
parent 93bda37c29
commit 3057435ab4
3 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/CampaignContentCard.tsx
View file

@ -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}

4
src/components/CampaignContentSection.tsx
View file

@ -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" />

6
tests/e2e/frontend.e2e.spec.ts
View file

@ -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')