search

SOS-RS / frontend

Auxílio RS: Projetos de Resposta a Emergências por Chuvas e Alagamentos
https://sos-rs.com
MIT License
596 stars 330 forks source link

[BUG] Botão "atualizar" de atualizar abrigo aparece cortado para fora da tela - mobile #225

Open alexanderscheibler opened 4 months ago

alexanderscheibler commented 4 months ago

Descrição

O botão "atualizar" de atualizar abrigo aparece cortado para fora da tela. Quanto menor o dispositivo, menos se pode ler a palavra - e menos área para "clicar" nele disponível.

Problema encontrado

  1. Abra o site em mobile
  2. Escolha um abrigo
  3. Clique em "Editar abrigo"
  4. Verifique a posição do botão "Atualizar". Embora tenha um baita espaço em branco entre o conteúdo e o botão, ele está metade para fora da tela.

Prioridade

Média

Solução proposta

Botão fique todo localizado na área da página, inclusive com padding apropriado para ter um espaçamento entre ele e o rodapé.

Ambiente

Observado em Android. Sem iPhone para testar. Samsung S23 FE, Google Chrome Samsung J7 Prime 2, Google Chrome

Evidência

Samsung S23 FE image

https://github.com/SOS-RS/frontend/assets/60936422/93f83985-ef92-4b61-aff0-b320b35ce771

Samsung J7 Prime 2 image

felipemrvieira commented 4 months ago

Estou nessa!

felipemrvieira commented 4 months ago

Segue o PR: https://github.com/SOS-RS/frontend/pull/232

allangalera commented 4 months ago

Acredito que o motivo para q isso aconteca seja pq estamos usando h-screen que traduz pra 100vh. Pra mobile 100vh não considera o tamanho da barra do navegador. Podemos trocar por 100dhv ou 100svh que vai impedir que isso aconteça.

https://caniuse.com/viewport-unit-variants

felipemrvieira commented 4 months ago

Precisamos de mais um review no pull request

larissapissurno commented 3 months ago

aprovado @felipemrvieira

HbLuca commented 3 months ago

@larissapissurno no ambiente de Q.A nao mudou, mas ao realizar o teste em Producao verifiquei que foi modificado, mas fica um questionamento... Deixarei em Q.A ate ter uma resposta sobre.

Na parte de editar o abrigo deve ficar a pagina com parte de preenchimento e depois em branco, para em seguida arrastar com o dedo ou realizar a rolagem da tela/site para aparecer o atualizar? Sei que se for na seta do teclado virtual, ao menos na parte de editar o abrigo, nao se tem a necessidade de clicar no botao.

Vide Loom: https://www.loom.com/share/965129ec909241b98265176380b402fe?sid=88b3a8e6-3602-4749-9739-82d71a267cbe