Corrige scroll horizontal indevido

[aprendendofelipe]

Corrige os problemas de scroll tratados em #1532, seja pelo username muito longo, seja pela falta de espaço no header.

No caso do header, quando o usuário estiver logado e estando em tela estreita, o ícone de busca é passado para dentro do menu.

Em telas muito pequenas ainda pode faltar espaço no header, mas agora o header irá aumentar de tamanho para caber todos os itens, que serão acessíveis através do scroll.

Como mexi no menu, arrumei um problema antigo que ocorria entre o Primer e o Link do Next. Era um problema que só gerava mensagens no console em modo de desenvolvimento, mas aproveitei para usar parte do que ganhamos de experiência no PR #1279 para já corrigir isso. Agradeço ao @Ryannnkl, pois ele fez muitos estudos no PR citado. 💪

Uma das coisas que se originou naquele PR foi o componente NavItem, que eu já havia criado e deixado disponível para ser utilizado se o PR fosse para frente. Esse componente, além de corrigir o erro do link, também mostra quando já estamos em alguma página do menu. No primeiro exemplo estava na página de criar conteúdo, e nos demais estava na página de configurações do usuário.

E já que mexemos no menu, adicionei os ícones faltantes e modifiquei outros.

Antes	Depois

Diferentes larguras de tela

Menu "Editar perfil"

Como a opção "Editar perfil" foi adicionada na página que lista os conteúdos dos usuários, os erros no console também estavam lá. Então também corrigi e já adicionei o ícone de engrenagem. E aproveitei para trocar o ícone de nuke:

Antes	Depois

Link em homologação

https://tabnews-git-fix-horizontal-scroll-tabnews.vercel.app

O que acham?

[vercel]

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

Name	Status	Preview	Updated (UTC)
tabnews	✅ Ready (Inspect)	Visit Preview	Dec 6, 2023 10:59pm

[aprendendofelipe]

Esqueci de comentar sobre a lista de conteúdos...

Agora ocorre a quebra de linha se faltar espaço, mas como o Tooltip tem posição fixa, para ele não sair da área visível, o "tempo de publicação" é mantido no lado direito da janela após a quebra:

[Rafatcb]

Gostei do resultado 👏 .

Dada as limitações do Tooltip, não consigo imaginar uma solução melhor para a parte dos conteúdos.

Eu ainda não tinha visto código com array nos valores de sx, fui pesquisar melhor e encontrei a explicação na documentação. Jeito interessante de lidar com a responsividade.

[aprendendofelipe]

Registrando aqui que o PR #1573 alterou a abordagem para corrigir o scroll horizontal.

O problema do Tooltip foi solucionado e agora o username muito longo é truncado.