El encabezado se desordena en vistas de tamaño medio en el tema Horizon

El encabezado de Horizon funciona muy bien la mayor parte del tiempo, tanto en móviles como en escritorio:

Sin embargo, tengo un teléfono plegable con una relación de aspecto extraña. Por desgracia, la barra de búsqueda y el avatar desaparecen y todo se desordena un poco:

Esto parece ocurrir en anchos de 640-767 px, ¡desafortunadamente justo donde se sitúa mi teléfono plegable!

Yo también puedo reproducirlo: el problema parece ser la clase contents dentro del encabezado que muestra flex en el tamaño de vista de teléfono plegable/tablet pequeña @media (min-width: 640px) and (max-width: 767px):

Se puede solucionar cambiando la propiedad a contents para ese rango de ancho:

@media (min-width: 640px) and (max-width: 767.98px) {
  .d-header>wrap .contents {
    display: contents!important;
  }
}

Creo que Discourse usa 768px como límite entre tableta y escritorio.

Sin embargo, encuentro que esa configuración lo empeora. Con ella desactivada, la cabecera aparece desordenada en todos los tamaños hasta 767, a menos que el dispositivo se especifique como móvil.

Pero al menos mi teléfono plegable está feliz. Solo no lo está mi navegador de escritorio cuando las cosas se hacen pequeñas.

Creo que esta configuración ha desaparecido ahora, por lo que ya no hay una solución alternativa.

El problema sigue persistiendo con Horizon.

¿Podrías ayudarme a diagnosticar esto? Actualmente, al reproducirlo mediante la simulación de escritorio (no tengo un teléfono plegable), no veo nada fuera de lo común.

Puedo reproducirlo simplemente reduciendo el ancho de la ventana de mi navegador en el escritorio:

Cuando es suficientemente ancho:

Un poco más estrecho, y ocurren algunas cosas extrañas (la barra lateral / el encabezado se vuelven blancos), no estoy muy seguro de que esto sea intencional:

Más estrecho resalta el problema (es decir, tamaño de teléfono plegable)

Muy estrecho (tamaño normal de teléfono) vuelve a estar bien.

Es intencional.

Sinceramente no lo entiendo, esto es a 644px:

En ningún ancho se me oculta el avatar.

¿Puedes reproducirlo aquí en Meta (con Horizon)?

Ah, se me olvidó que podía hacer eso para los casos de reproducción. No, tampoco se reproduce para mí en Meta con Horizon.

Supongo que el problema está en mi sitio web entonces. Voy a investigar por mi lado y te haré saber qué encuentro. ¡Gracias por revisar esto!

Vaya, resultó sorprendentemente fácil encontrar el problema.

Este componente del tema no es compatible con Horizon:

¡Y me encanta ese TC! No soporto que el menú se salte al lado derecho en el móvil. Son esas pequeñas cosas las que nos vuelven locos (bueno, a algunos de nosotros), ¿verdad? Quizás me guste así porque soy zurdo.

Sí, lo entiendo.

No dudes en dejar un comentario en el tema original de Horizon Theme, donde dijimos:

también uso ese componente (siento lo mismo respecto al icono de la barra lateral, aunque no me gusta ni uso Horizon) y he trabajado en ese componente. Veré si puedo hacer una correión para ello, Nathan.

¡Hola, Nathan! Tengo una solución aquí:

¡Lilly, eres la mejor! Disfrutando de mi hamburguesa de la izquierda Y Horizon en mi portátil plegable.

¡Maravilloso!!!