Adjust viewport height for mobile devices on Update Shelter page

[felipemrvieira]

ISSUE 225

[lucianomlima]

Coloca uns prints mostrando que resolveu e principalmente que não impactou outras resoluções.

[felipemrvieira]

[thiagomrvieira]

Lgtm

[allangalera]

Postei na issue original. Acredito que podemos resolver isso usando apenas css -> https://caniuse.com/viewport-unit-variants

[vinny-silveira]

Analisando bem... Não precisaria nem mesmo o useEffect com os listeners, apenas o cálculo do "vh custom" no topo do arquivo fora da "declaração do componente", pois na prática, o usuário não vai redimensionar a página no smartphone. Fiz alguns testes locais aqui e funcionaram normalmente (desktop e mobile), você pode alterar e fazer mais uns testes locais também, quanto menos a necessidade de useEffect melhor., resolvido dessa forma mesmo com Tailwind:

document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);

const UpdateShelter = () => {
// ...

  return (
    <div className="flex flex-col items-center h-[calc(var(--vh,1vh)*100)] md:h-screen">

// ...

Para telas maiores que 768 (md), pega o vh completo, abaixo disso, ele calcula.

[vinny-silveira]

Postei na issue original. Acredito que podemos resolver isso usando apenas css -> https://caniuse.com/viewport-unit-variants

Bem mais simples mesmo essa abordagem @allangalera, 92.34% dos browsers e versões já suportam essa unidade:

@felipemrvieira, como temos um suporte para mais de 90%, considere o uso do dvh por gentileza.

[felipemrvieira]

Postei na issue original. Acredito que podemos resolver isso usando apenas css -> https://caniuse.com/viewport-unit-variants

Bem mais simples mesmo essa abordagem @allangalera, 92.34% dos browsers e versões já suportam essa unidade:

@felipemrvieira, como temos um suporte para mais de 90%, considere o uso do dvh por gentileza.

Acabei de atualizar o PR. Valeu pelo feedback!

[vinny-silveira]

Por essa abordagem tem uma nível de compatibilidade bem maior que o dvh, uma vez que ele calcula a propriedade apenas no "primeiro load" da aplicação e usa a unidade px, PR apto ao merge.

[vinny-silveira]

@SOS-RS/frontenders Preciso de mais um review aqui.

[dadedeandrade]

Perfeitooo

[felipemrvieira]

Acredito que está pronto para merge @vinny-silveira @andradeviniicius @larissapissurno

[larissapissurno]

mergeado @felipemrvieira