En-tête désordonné sur les écrans de taille moyenne avec le thème Horizon

L’en-tête de Horizon fonctionne très bien la plupart du temps, aussi bien sur mobile que sur ordinateur :

Cependant, je possède un téléphone pliable avec un ratio d’aspect inhabituel. Malheureusement, la barre de recherche et l’avatar disparaissent et tout se décale un peu :

Cela semble concerner une largeur de 640 à 767 px — malheureusement, c’est exactement là où se situe mon téléphone pliable !

Je peux aussi reproduire le problème : il semble que la classe contents à l’intérieur de l’en-tête, qui affiche flex à la taille de vue des téléphones pliables ou petites tablettes @media (min-width: 640px) and (max-width: 767px), soit en cause :

On peut y remédier en modifiant la propriété pour contents dans cette plage de largeur :

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

Je pense que Discourse utilise 768px comme limite entre tablette et bureau.

Je trouve que ce réglage empire les choses !! Avec l’option désactivée, l’en-tête est brouillé à toutes les tailles jusqu’à 767, sauf si l’appareil est spécifié comme mobile.

Mais au moins, mon téléphone pliable est satisfait. Pas mon navigateur de bureau, en revanche, quand l’écran devient petit.

Je pense que ce paramètre a désormais disparu, il n’y a donc plus de solution de contournement.

Le problème persiste avec Horizon.

Pourrais-tu m’aider à diagnostiquer ce problème, car pour l’instant, en reproduisant le scénario via une simulation sur bureau (je n’ai pas de téléphone pliable), je ne vois rien d’anormal.

Je peux le reproduire en réduisant simplement la fenêtre de mon navigateur sur mon bureau :

Lorsqu’elle est suffisamment large :

Un peu plus étroite, et quelques bizarreries se produisent (la barre latérale / l’en-tête deviennent blancs), ce qui ne me semble pas vraiment intentionnel :

Plus étroite encore, le problème se met en évidence (c’est-à-dire à la taille d’un téléphone pliable)

Très étroite (taille normale d’un téléphone), tout redevient correct.

C’est le cas.

Je ne comprends vraiment pas, c’est à 644px :

L’avatar ne disparaît pas pour moi à aucune largeur.

Pouvez-vous reproduire ce problème ici sur Meta (avec Horizon) ?

Ah - j’avais oublié que je pouvais faire ça pour les problèmes reproductibles ! Non, ça ne se reproduit pas non plus chez moi sur Meta avec Horizon.

Je suppose que le problème vient donc de mon site - je vais faire du dépannage de mon côté et je vous tiendrai au courant de ce que je trouve. Merci d’avoir enquêté !!!

Waouh, il a été étonnamment facile de trouver le problème.

Ce composant de thème n’est pas compatible avec Horizon :

Et j’adore ce TC !! Je ne supporte pas que le menu saute à droite sur mobile. Ce sont les petits détails qui nous rendent fous (eh bien, certains d’entre nous), non ? Peut-être que j’aime ça parce que je suis gaucher.

Oui, je comprends.

N’hésitez pas à laisser un message dans le sujet original du Thème Horizon, où nous avions indiqué :

j’utilise aussi ce composant (je ressens la même chose concernant l’icône de la barre latérale, même si j’aime ni n’utilise Horizon), et j’ai déjà travaillé sur ce composant. Je vais voir si je peux proposer une correction pour ça, Nathan.

salut Nathan, j’ai une correction ici :

Lilly, tu es géniale ! Je profite actuellement à la fois de mon hamburger du côté gauche ET de Horizon sur mon pliable.

Magnifique !!!