[Responsividade e Acessibilidade] Truncar username longo na lista de conteúdos e mais

[aprendendofelipe]

Aplica algumas melhorias de responsividade e acessibilidade.

Lista de conteúdos

Agora será truncado o username sempre que faltar espaço.

Usando display: grid, consegui eliminar a necessidade dos diversos overflow: hidden e do position: absolute no Tooltip, então acredito que chegamos em um resultado melhor, pois a solução anterior (#1562) parecia mais um bug do que o bug que ela corrigiu: 😅

Antes	Depois

Por estarmos truncando o username, adicionei um Tooltip:

Em resoluções com pouca largura (menores de 360px), achei melhor manter o scroll horizontal como ocorria anteriormente, pois ele já vai ser necessário por causa do Header. Exemplo com 160px:

Antes	Depois

Obs. O título continua quebrando a linha para facilitar a leitura sem precisar do scroll horizontal.

Header

Em telas de 360px de largura, para usuários com grandes saldos de TabCoins e/ou TabCash, ainda podia ser necessário um pequeno scroll horizontal para visualizar todo o Header, então reduzi alguns espaçamentos para telas menores do que o target 544px. O mais perceptível é o espaçamento entre os saldos:

Antes	Depois

Telas ainda menores

Dois problemas que só ocorriam em telas muito menores do que 360px, mas que achei que valia a pena melhorar:

Antes	Depois

HTML semântico

Como ajustei o Tooltip do PastTime, já aproveitei para trocar a tag span pela time.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tabnews	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2023 11:00am

[Rafatcb]

Acho que o resultado ficou melhor! Bom, pelo menos a data não está mais sozinha em outra linha 😅

Aproveitando, acho que poderia ajustar o alinhamento do ícone de busca quando o usuário está deslogado:

A primeira impressão que tive é que o ícone do tema estava errado, mas na verdade ele está alinhada com os textos. O ícone de busca está centralizado, mas me aprece que alinhado embaixo ficaria melhor.

E também poderia adicionar um ml nele, já que nas telas "super pequenas" ele está desproporcionalmente mais próximo de "Recentes" do que do ícone do tema.

[aprendendofelipe]

Acho que o resultado ficou melhor! Bom, pelo menos a data não está mais sozinha em outra linha 😅

Aproveitando, acho que poderia ajustar o alinhamento do ícone de busca quando o usuário está deslogado:

A primeira impressão que tive é que o ícone do tema estava errado, mas na verdade ele está alinhada com os textos. O ícone de busca está centralizado, mas me aprece que alinhado embaixo ficaria melhor.

E também poderia adicionar um ml nele, já que nas telas "super pequenas" ele está desproporcionalmente mais próximo de "Recentes" do que do ícone do tema.

Boa! Como tem coisa pra arrumar no PR, já aproveito para ver se dá para melhorar isso 👍

[aprendendofelipe]

Ficou melhor?

1. Produção
2. PR v1
3. PR v2

[Rafatcb]

Ficou melhor?

Sim, a opção 3 ("PR v2") me parece ótima!

[aprendendofelipe]

Como mexemos nos alinhamentos do Header, fui conferir o restante: logado, deslogado e os demais tamanhos de tela.

Na versão logado temos o ícone de novo conteúdo (PlusIcon) que também estava centralizado. Só que ele não ficou bom em qualquer outro alinhamento, então voltei ícone de busca para o alinhamento original e subi o ícone de alterar o tema.

Concordo que esses dois ficaram melhores um pouco pra baixo (como na PR v2), mas temos que alinhar também com os outros elementos, inclusive as coins.

O que acham da v3?

[Rafatcb]

Acho que tudo bem, agora está melhor do que antes do PR 👍