Rafael MelgaçoandClaude Opus 5 c56416aad9 fix(inbox): o painel de CRM cabe na tela — e o header para de travar a largura ...

Em 1280px o painel de CRM não existia na tela. Não cortado, não parcial:
ausente. O atendente trabalhava sem contexto nenhum do cliente na resolução de
notebook mais comum que existe.

## A causa não era onde parecia

O suspeito óbvio era o grid (`xl:grid-cols-[300px_1fr_320px]`, e o `xl` dispara
justo em 1280). A medição apontou outro lugar:

    grid-template-columns resolvido, de 1280 a 1536:  "300px 706.953px 320px"
                                            em 1920:  "300px 1012px    320px"

A coluna do meio TRAVAVA em 706,95px — o `min-content` dela; `1fr` é
`minmax(auto, 1fr)` e não encolhe abaixo do conteúdo. Filho a filho: o thread
pedia 132px, o composer 370, e o ConversationHeader pedia 707, porque a barra de
ações era `shrink-0`. Um `shrink-0` numa fileira de botões estava definindo a
largura mínima da aplicação inteira.

## Correção de uma afirmação minha

No commit anterior escrevi que o painel era "inalcançável". Errado: o `main` tem
`overflow-x: auto` e `scrollWidth 1351 > clientWidth 1040` — havia scroll, no
`main`, não no documento; eu medira o do documento. Continua defeito (rolar o
inbox de lado para ver o CRM é ruim e ninguém descobre), mas menos grave.

## Escolhido por medição, não por palpite

Cada build custa ~2min, então as variantes foram injetadas por CSS no browser já
renderizado e medidas na hora, em 5 larguras. Três decisões saíram daí:

  * `minmax(0,1fr)` NÃO entrou — mediu idêntico a não tê-lo. Consertado o
    header, o `1fr` encolhe sozinho. Seria mudança sem efeito.
  * Só consertar o header deixava 372px de thread contra um piso de 370 do
    composer: 2px não é margem, é sorte. Duas faixas (compacta no `xl`, generosa
    no `2xl`) dão 424px — 54px de folga — e preservam as laterais onde há espaço.
  * Apertar o gap dos botões economizava 4-6px de altura; não paga a densidade.

## A lapidação que não era sobre caber

O placeholder passou a quebrar em duas linhas num campo de uma linha. Aqui a
screenshot me enganou e a medição corrigiu: eu li como "composer cortado", e
`composer_cortado` media 0 em todas as variantes — era texto, não layout.

O atalho saiu do placeholder para o diálogo de atalhos e o `title`. Ele some
assim que se digita a primeira letra — some exatamente quando você ia quebrar
linha. E o diálogo de atalhos não tinha o atalho mais usado do inbox.
"(só o time vê)" ficou: não é atalho, é consequência.

"Ver contato" aparecia DUAS VEZES na mesma tela — header e card CONTATO do
painel — e era ele que sobrava na segunda linha. Com `xl:hidden` (a mesma
largura em que o painel entra), os botões voltam a caber em uma linha em 1280 e
o header cai de 145px para 107. Abaixo de xl o painel não existe e o botão
continua lá. Não é esconder ação; é parar de repeti-la.

## Medido (tests/sonda-inbox-cabe-na-tela.ts, 10/10)

        vp   fora  painel  thread  hdr_h   acoes  portas
      1280      0     296     424    107     0/4       1     (antes: 311 fora, 707 travado)
      1366      0     296     510    107     0/4       1     (antes: 225 fora)
      1440      0     296     584    107     0/4       1     (antes: 151 fora)
      1536      0     320     628     63     0/4       1     (antes:  55 fora)
      1920      0     320    1012     63     0/4       1     (controle: já cabia)

Duas camadas de guarda, com a limitação declarada: a sonda é a medição de
verdade e NÃO roda no CI; `tests/unit/inbox-header-nao-trava.test.tsx` é a
catraca que roda, olha CLASSE e não pixel — jsdom não tem engine de layout, e um
teste de largura lá mediria zero em tudo e passaria feliz.

Sabotagens: `shrink-0` de volta → previsão 1, resultado 2 (troquei o className
inteiro, levando junto o `flex-wrap`); `flex-wrap` fora → 1 → 1.

## Defeitos meus, achados no caminho

  * mock de `useResumeAi` — módulo que NÃO existe (o real é
    `useResumeAiAttendance`). O teste passava porque o hook verdadeiro rodava: o
    mock não mockava nada e ninguém era avisado.
  * crases dentro de template literal na sonda — `tsc` reprovou; mesmo erro que
    já cometi com SQL.
  * duas imagens versionadas sem citação no commit 3227bf81 — o gate
    `evidencia-citada` reprovou. O pre-commit não roda a suíte, então aquele
    commit deixou o CI vermelho e eu não vi. Corrigido aqui.

typecheck 0 · lint 0 errors · 1819 unitários em 170 arquivos

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FkS3mzwtXughmjVC5FCoNo

2026-08-07 11:32:29 -03:00

127 KiB

1280x900px

Raw Permalink History