From e4e5a03e1d442a0b3f450be5741eb3aacc9c086f Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Thu, 5 Nov 2026 16:36:14 -0300 Subject: [PATCH] =?UTF-8?q?docs(postmortem):=20registra=20a=20regress?= =?UTF-8?q?=C3=A3o=20do=20destaque=20do=20board?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...-11-05-board-destaque-legenda-instagram.md | 1 + ...-11-05-board-destaque-legenda-instagram.md | 69 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 docs/changelog/2026-11-05-board-destaque-legenda-instagram.md create mode 100644 docs/postmortems/2026-11-05-board-destaque-legenda-instagram.md diff --git a/docs/changelog/2026-11-05-board-destaque-legenda-instagram.md b/docs/changelog/2026-11-05-board-destaque-legenda-instagram.md new file mode 100644 index 00000000..e1800885 --- /dev/null +++ b/docs/changelog/2026-11-05-board-destaque-legenda-instagram.md @@ -0,0 +1 @@ +**Board da home — destaque com legenda de Instagram volta a ser truncado (2026-11-05):** o card em destaque da seção “Acompanhe de perto” 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. O `h3` do destaque voltou a limitar 3 linhas, `text-balance` saiu dos dois títulos (a combinação com `-webkit-line-clamp` não é confiável em todos os browsers), `break-words` e `min-w-0` evitam overflow de palavras longas, e o e2e do feed do Instagram passou a pinar o clamp do destaque — não só o do compacto. Sem migration, sem mudança de conteúdo no CMS e sem alterar a ordem por recência do board; o texto completo da legenda continua no DOM e no compartilhamento. Verificação: `pnpm gate:fast` verde (461 arquivos, 5.069 testes) e e2e afetado no CI. diff --git a/docs/postmortems/2026-11-05-board-destaque-legenda-instagram.md b/docs/postmortems/2026-11-05-board-destaque-legenda-instagram.md new file mode 100644 index 00000000..7caa439a --- /dev/null +++ b/docs/postmortems/2026-11-05-board-destaque-legenda-instagram.md @@ -0,0 +1,69 @@ +# Post-mortem: card em destaque do board renderizava a legenda inteira do Instagram + +> Template do `/bug-fix`. Fatos apurados nesta sessão; o que não foi apurado fica marcado como tal. + +## Registro + +| Campo | Valor | +| ------------------- | ----------------------------------------------------------------------------------------- | +| Data do post-mortem | 2026-11-05 | +| Severidade | média (regressão visual na home; sem indisponibilidade, perda de dados ou erro funcional) | +| Ambiente | prod | +| Issue(s) | sem Issue | +| PR do fix | a preencher após a abertura do PR | +| Detectado por | humano (relato na sessão: “fontes super grandes e o texto não quebra” no board da home) | + +## Timeline + +| Momento | Data/hora | Evento | +| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ | +| Início provável | 2026-10-22 | S47 (`5635e652`) reescreve `CampaignContentCard` e remove o `line-clamp-3` do título do card em destaque. | +| Detecção | 2026-11-05 | Relato humano; o HTML de produção mostrava uma legenda de 889 caracteres como `h3` do destaque, a 31px, sem clamp. | +| Correção implementada | 2026-11-05 | `fix/board-featured-caption-clamp`: clamp de 3 linhas no destaque, remoção de `text-balance`, `break-words` e `min-w-0`. | +| Correção mergeada | não apurado | Pendente do CI/PR. | +| Deploy | não apurado | Pendente; produção exige approve humano no environment `production`. | +| Verificado em prod | não apurado | Pendente de confirmação humana pós-deploy. | + +## O bug + +Na home pública, o board “Acompanhe de perto” (seção de artigos, YouTube e Instagram) renderizava o card em destaque com a legenda completa de um post do Instagram. No caso real, eram **889 caracteres** em um `h3` de **31px** (25px no mobile), sem `line-clamp`, o que esticava a coluna e transformava o destaque em uma parede de texto. Os cards compactos tinham `line-clamp-3`, mas carregavam `text-balance`, que em alguns browsers quebra o funcionamento do `-webkit-line-clamp` — o texto deixava de truncar. Como o board é ordenado por recência e o Instagram era a fonte mais recente, as quatro posições eram legendas, não títulos de matéria. + +## Causa-raiz + +1. **Por que o texto ficou gigante?** Porque o `h3` do destaque não tinha `line-clamp` e usava o tamanho de título editorial (31px). +2. **Por que não tinha clamp?** A S47 (`5635e652`) separou o card em `featured` e `compact`; o `h3` antigo, que aplicava `line-clamp-3` a todas as variantes, foi substituído por um `h3` de destaque sem clamp (o design assumia um título curto de matéria, não uma legenda de feed). +3. **Por que a legenda inteira virou título?** `toInstagramCardData` usa `post.caption` como `title`; o board ordena posts + YouTube + Instagram por data e corta em 4. Com o feed do Instagram mais recente, a legenda ocupa o destaque. +4. **Por que os compactos também falhavam em alguns browsers?** `text-balance` foi adicionado aos dois `h3`; a combinação com `-webkit-line-clamp` não é confiável em todos os motores. +5. **Por que passou?** O e2e pinava o clamp apenas no card compacto (a legenda longa do stub), nunca no destaque; o card em destaque do stub tem legenda curta. + +## Correção + +- `src/components/CampaignContentCard.tsx`: `line-clamp-3` no `h3` do destaque; `text-balance` removido dos dois `h3`; `break-words` em ambos; `min-w-0` no wrapper do card. +- `src/components/CampaignContentSection.tsx`: `min-w-0` nas duas colunas do grid (destaque e laterais). +- `tests/e2e/frontend.e2e.spec.ts`: o teste do feed do Instagram agora exige `-webkit-line-clamp: 3` e `overflow: hidden` também no `h3` do card em destaque. + +A causa é o card de destaque sem limite; o clamp restaura o comportamento anterior sem esconder a legenda do DOM (o texto completo continua acessível e compartilhável). + +## Verificação + +- Teste de regressão: `tests/e2e/frontend.e2e.spec.ts` → “renders the Instagram feed…” — a asserção do destaque falha sem o `line-clamp` e passa com o fix (verificação local de CSS; execução no CI). +- Suíte: `pnpm gate:fast` verde (461 arquivos, 5.069 testes). +- CI: pendente do PR. +- Prod: pendente de approve/deploy e confirmação humana. + +## Prevenção + +| Estratégia | Custo | Estado | +| --------------------------------------------------------------------------- | ------ | ------------------------------ | +| Pinar o clamp no card em destaque no e2e (além do compacto) | barata | implementada agora | +| Separar “título de exibição” de “legenda” no feed (excerpt curto na origem) | cara | documentada — não implementada | + +**Estratégia implementada:** a asserção de `-webkit-line-clamp` no destaque fecha o buraco que deixou a regressão passar. + +**Estratégia documentada (cara):** derivar um excerpt curto da legenda do Instagram para o card (primeira frase/limite de caracteres), mantendo a legenda completa apenas no `alt`/compartilhamento. Isso reduziria o nome acessível gigante do link e o texto do compartilhamento, mas mexe no contrato de conteúdo do board e merece decisão de produto. + +## Lições + +- Quando o design assume “título curto” e o dado real é uma legenda de feed, a proteção não pode depender do tamanho do conteúdo: o clamp é parte do componente, não da amostra do teste. +- `text-balance` + `line-clamp` é uma combinação frágil entre motores; usar `text-balance` só em títulos curtos e estáveis (headings de seção). +- O e2e deve pinar a variante que tem o maior tipo e a maior probabilidade de receber conteúdo longo — o destaque.