Cabeçalho desconfigura em visualizações de tamanho médio no tema Horizon

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.

Acho que essa configuração desapareceu agora, então não há mais uma solução alternativa.

O problema ainda persiste no Horizon.

Você poderia me ajudar a diagnosticar isso? No momento, ao reproduzir o problema via simulação em desktop (não tenho um celular dobrável), não vejo nada de anormal.

Consego reproduzir o problema simplesmente redimensionando a janela do meu navegador no desktop:

Quando suficientemente larga:

Um pouco mais estreita, e algumas coisas estranhas acontecem (a barra lateral / cabeçalho ficam brancos), não tenho certeza absoluta se é intencional:

Mais estreita ainda destaca o problema (ou seja, tamanho de celular dobrável)

Muito estreita (tamanho normal de celular) está normal novamente.

É intencional.

Sinceramente não entendo isso, isso está em 644px:

Em nenhuma largura o avatar desaparece para mim.

Você consegue reproduzir isso aqui no Meta (com Horizon)?

Ah - esqueci que podia fazer isso para coisas de reprodução! Não, também não consigo reproduzir no Meta com o Horizon.

Acho que o problema está no meu site então - vou investigar por aqui e aviso o que descobrir. Obrigado por investigar!!!

Nossa, foi surpreendentemente fácil encontrar o problema.

Este componente do tema não é compatível com o Horizon:

E eu adoro esse TC!! Não suporto quando o menu pula para a direita no celular. São as pequenas coisas que nos enlouquecem (bem, alguns de nós), né? Talvez eu goste assim porque sou canhoto.

É, entendo isso.

Sinta-se à vontade para deixar uma mensagem no tópico original do Tema Horizon, onde dissemos:

eu também uso esse componente (sinto o mesmo quanto ao ícone da barra lateral, embora não goste nem use o Horizon) e já fiz trabalhos nesse componente. vou ver se consigo fazer uma correção para isso, Nathan.

oi Nathan, tenho uma correção aqui:

Lilly, você é incrível! No momento, estou curtindo tanto meu hambúrguer do lado esquerdo quanto o Horizon no meu notebook dobrável.

Maravilhoso!!!