0005 — O topo da imobiliária não mostra título no mobile¶

Status: RASCUNHO → DIAGNOSTICADO → EM CORREÇÃO → CORRIGIDO

1. Sintoma¶

Na visualização de uma imobiliária, no mobile a barra do topo mostra só botões: não há ícone, não há título, não há subtítulo. O nome da imobiliária — a única coisa que diz qual registro está aberto — não aparece. O terceiro botão ainda vaza pela borda direita.

No desktop a tela está correta.

Não é impressão: medido no dev-remote, a largura do bloco de título é 0px em 390px.

2. Reprodução¶

1. Abrir /app/agencies e tocar em qualquer imobiliária, num viewport de 390px.

2. Observar a barra do topo.

3. Ambiente: dev-remote, build da spec 0021 (6fcfbb0).

4. Superfície: mobile apenas. No desktop o título mede 204px e a tela está certa.
5. Dados/pré-condições: nenhuma; qualquer papel com acesso a imobiliárias.

3. Esperado × Atual¶

• Esperado: ícone, título e subtítulo à esquerda, ações à direita — como em Inquilinos, Imóveis, Perfis e Contratos.
• Atual: três botões com rótulo ocupando 382px de uma barra de 390px. Sobram 8px para ícone, título e subtítulo, e o bloco colapsa para 0px.

4. Causa raiz¶

Omissão da spec 0020, por critério de migração mal escolhido.

Aquela spec moveu a decisão de forma da ação para o PageHeader (primaryAction / secondaryAction), e a tabela de migração listou as páginas que usavam o ternário isMobile ? <IconButton/> : <Button/>. Esta página nunca teve o ternário: ela passa três <Button> crus dentro de actions={<Box>…</Box>}. Não casou com o critério, e por isso não entrou na lista.

Duas regras da 0020 ficam violadas ao mesmo tempo:

• RN5 — quem decide a forma da ação é o PageHeader, não a página. Aqui a página decide, e decide igual para os dois viewports.
• RN7 — no máximo duas ações no topo. Aqui são três, e o efeito de estourar a barra é exatamente o que a regra existia para impedir.

Onde está: apps/web/src/pages/agencies/show.tsx, no actions={…} do PageHeader.

De passagem, o mesmo bloco tem <Box sx={{ color: "secondary" }}> — string de paleta na propriedade CSS, que o MUI descarta. É o defeito que a spec 0019 corrigiu nos chips e que já reapareceu no HeaderBar do Centro de Operações (spec 0020) e nas telas de admin (fix da 0020).

Por que só aqui. A varredura confirmou: das seis páginas com actions={…} num PageHeader, cinco usam para barra de filtro ou ações por linha. Esta é a única com botões de topo crus.

5. Correção¶

apps/api¶

Sem impacto.

apps/web¶

• Onde: pages/agencies/show.tsx.
• O quê:
• primaryAction = Convidar operador (a ação desejada da tela).
• secondaryAction = Editar.
• Remover sai do topo e vai para o fim da página, junto do que ela destrói. Ação destrutiva e rara não divide espaço com as frequentes, e longe do polegar é onde ela deve estar — some o risco de exclusão por toque errado.
• Sai o color: "secondary" inválido junto com o Box.
• data-testid: os três existentes são preservados — agency-invite-button, agency-edit-button e agency-delete-button. O último muda de lugar na tela, não de nome.
• Responsividade & PWA: a correção é do mobile e não altera o desktop, que já estava certo. Sem impacto no service worker além do rebuild.

apps/e2e¶

• Teste de regressão: o cenário que falha hoje — em 390px, o título do topo tem largura > 0 e o número de ações no topo é ≤ 2. Entra em page-header.spec.ts, junto dos cenários da spec 0020, e percorre as telas de detalhe, não só esta: o defeito foi de cobertura, e cobrir só a tela que apareceu repete o erro.

6. Risco / impacto colateral¶

• Não toca dinheiro nem regra de negócio: é posição de botão.
• "Remover" muda de lugar. Quem já usa a tela vai procurá-lo no topo. É o custo aceito para caber em 390px, e a spec 0020 já estabeleceu o teto de duas ações.
• O agency-delete-button continua existindo com o mesmo testid; a suíte que o aciona não quebra por seletor.

7. Critérios de aceite¶

• [x] CA1. Seguindo os passos da seção 2, o topo mostra ícone, título e subtítulo em 390px.
• [x] CA2. O bloco de título mede largura > 0 em 390px.
• [x] CA3. O topo tem no máximo duas ações (RN7 da spec 0020).
• [x] CA4. No mobile as duas ações são botões evidentes — preenchida a principal, contornada a secundária (RN4 da spec 0020).
• [x] CA5. "Remover" continua acessível, com o testid agency-delete-button.
• [x] CA6. Nenhum color: "secondary" como string de paleta sobra no arquivo.
• [x] CA7. O e2e afere título e teto de ações em todas as telas de detalhe, não só nesta.
• [x] CA8. tsc limpo, sem apontamento novo.

8. Plano¶

• [x] Reproduzir medindo a largura do título em 390px (linha de base: 0px)
• [x] apps/web — primaryAction/secondaryAction e "Remover" para o fim da página
• [x] apps/e2e — regressão cobrindo todas as telas de detalhe
• [x] tsc e make test
• [x] /devremote-rebuild + medição nos dois viewports

9. Decisões em aberto¶

Nenhuma. O usuário decidiu: Convidar + Editar no topo, Remover no fim da página.

10. Registro¶

Antes × depois, medido em 390px¶

O desktop não mudou: título em 204px antes e depois.

O que divergiu do plano¶

Nada. A correção saiu como escrita: duas ações tipadas no topo, a destrutiva no fim da página. É o primeiro registro desta sessão em que a implementação não descobriu nada que a análise não tivesse previsto — provavelmente porque a causa raiz era conhecida antes de começar, por ser omissão de uma entrega própria e recente.

O que este defeito ensina sobre o critério de migração¶

A spec 0020 migrou "as páginas que usam o ternário isMobile ?". O critério descreve como o código estava escrito, não o que a tela faz. Quem escreveu diferente ficou de fora, e nenhuma verificação pegou porque a CA da 0020 conferia presença de primaryAction nas páginas migradas — não a ausência de botões crus nas demais.

É o mesmo erro de método que deixou sete telas de fora naquela spec (varrer nome de arquivo em vez de rota). Duas vezes seguidas o critério de busca casou com a convenção e não com a realidade.

Por isso a regressão cobre todas as telas de detalhe, e afere o efeito — largura do título > 40px e no máximo duas ações — em vez de conferir se a página usa a prop certa. Aferir efeito é o que sobrevive à próxima forma de escrever errado.

Verificação¶

• tsc: limpo.
• page-header.spec.ts: 12/12 em chromium, com o cenário novo cobrindo Inquilinos, Imóveis e Imobiliárias.
• Medido no dev-remote após rebuild: os números da tabela acima, nos dois viewports.
• make test: não impactado — nenhum arquivo da API tocado.
• Suíte e2e completa: a executar antes do merge.