O cabeçalho no Horizon funciona muito bem na maior parte do tempo, tanto em dispositivos móveis quanto em desktop:
No entanto, tenho um telefone dobrável com uma proporção de aspecto estranha. Infelizmente, a barra de pesquisa e o avatar desaparecem e tudo fica um pouco desorganizado:
Isso parece ocorrer para larguras entre 640 e 767 px — infelizmente, é exatamente onde meu telefone dobrável se encaixa!
Eu também consigo reproduzir isso — o problema parece estar na classe contents dentro do cabeçalho exibindo flex no tamanho de viewport de telefone dobrável/tablet pequeno @media (min-width: 640px) and (max-width: 767px):
Isso pode ser corrigido alterando a propriedade para contents para essa faixa de largura:
@media (min-width: 640px) and (max-width: 767.98px) {
.d-header>wrap .contents {
display: contents!important;
}
}
Acho que o Discourse usa 768px como limite entre tablet e desktop.
Acho que essa configuração piora as coisas!! Com ela desativada, o cabeçalho fica embaralhado em todos os tamanhos até 767, a menos que o dispositivo seja especificado como móvel.
Mas pelo menos meu telefone dobrável está feliz. Só não está meu navegador de desktop quando as coisas ficam pequenas.