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.