Cronograma de torneios some no celular

Por que os navegadores mobile escondem conteúdo

Em dispositivos móveis, a barra de endereço do navegador não é um elemento fixo. Ela expande e recolhe conforme o usuário rola a página, o que muda a altura da viewport visível em tempo real. Uma página projetada com base em uma altura fixa em pixels pode, portanto, perder a seção superior ou inferior sem aviso.

Para páginas de grade de torneios de poker, isso é um problema prático. Uma grade é uma lista densa de eventos, buy-ins, horários de início e estruturas. Se a barra de endereço cobre o cabeçalho, os jogadores podem não ver o dia ou o nome da série. Se cobre o rodapé, podem perder links de navegação ou as últimas linhas de uma tabela.

A armadilha das unidades de viewport

Uma causa comum de conteúdo escondido é o uso de unidades de altura de viewport. Em CSS, 100vh se refere à altura da viewport, mas em navegadores mobile muitas vezes se refere à maior viewport possível, aquela com a barra de endereço recolhida. Quando a barra de endereço está visível, a área realmente visível é menor que 100vh.

O resultado é que um layout de altura total pode se estender para além da tela visível. Elementos posicionados na parte inferior, como uma barra de filtros fixa ou um controle de "próxima página", podem ficar embaixo do chrome do navegador.

O CSS moderno oferece alternativas. Unidades de viewport dinâmicas como dvh e unidades de viewport pequenas como svh foram criadas para acompanhar a viewport em mudança. Usar min-height: 100dvh em vez de height: 100vh é a correção típica para layouts de tela cheia.

Safe areas (insets)

Outro fator é a safe area do dispositivo. Muitos celulares têm cantos arredondados, notch ou indicador de home na parte inferior. Conteúdo posicionado muito perto da borda pode ser cortado ou ficar difícil de tocar.

As variáveis de ambiente do CSS env(safe-area-inset-top), env(safe-area-inset-bottom) e suas equivalentes à esquerda e à direita permitem que um layout reserve espaço para essas áreas. Adicionar padding com base nesses valores mantém controles importantes dentro da região utilizável.

Para uma grade de torneios, isso importa principalmente para cabeçalhos fixos, barras de navegação inferiores e qualquer botão que avance para o próximo dia ou página.

Verificações práticas para páginas de grade

• Teste a página com a barra de endereço expandida e recolhida, não apenas em um emulador de desktop.
• Confira a primeira e a última linha de uma tabela longa de eventos para confirmar que estão acessíveis.
• Verifique se elementos fixos não se sobrepõem ao conteúdo da lista quando a viewport encolhe.
• Confirme que alvos de toque perto da borda inferior continuam totalmente visíveis e clicáveis.
• Revise o tamanho do texto e a altura da linha para que linhas densas da grade fiquem legíveis sem precisar dar zoom.

Por que isso importa para quem joga poker

Cronogramas de torneios são sensíveis ao tempo. Quem confere a grade no celular entre uma mão e outra precisa achar rápido o horário de início, o valor do buy-in ou o cutoff do late register. Se a barra de endereço esconde a linha relevante ou o controle de navegação, a página falha naquilo que deveria fazer de melhor.

Um bom design mobile não exige um cronograma separado. Exige layouts que respondam ao viewport real, respeitem as safe areas e mantenham as informações mais importantes visíveis o tempo todo. Testar em aparelhos de verdade continua sendo o jeito mais confiável de flagrar esses problemas antes dos jogadores.