Recouvrement d'affichage sur mobile

Bonjour

Depuis quelques temps j’ai la barre verte qui indique à combien de message on en est dans le topic qui recouvre le texte des messages, suivant la mise en page.

Voici un exemple :

Il me semble que c’est récent.
Quelque chose a été changé à ce niveau ?

Ça dépend de ce que tu entends par récent. J’avais fait des modifs pour réduire un peu les marges, mais ça fait bien 1 an. Il n’y a pas eu de modifs entre temps.

Je confirme que j’ai ce cas depuis bien longtemps et je l’ai jamais réellement fait remonter

Ha d’accord. Marrant que je ne l’avais encore jamais remarqué, car je me sers très régulièrement du site sur mobile, et c’est la première fois que je m’en rends compte.
C’est pour ça que j’ai associé à un changement récent qui serait facile à retrouver.

Bon, hé bien ça n’est pas bien grave de toute façon, mais si quelqu’un arrive à trouver pourquoi ce recouvrement, ça pourrait améliorer un peu l’affichage sur mobile de corriger ça. :wink:

1 Like

Le problème n’est présent que sur les discussions avec peu de messages (pas besoin de scroller pour voir l’intégralité des messages). Donc on ne le rencontre pas forcément souvent.

Si quelqu’un veut se pencher sur le sujet, c’est juste un peu de css à corriger, les tests se font depuis votre navigateur habituel, pas besoin d’accès spécifique. Et si vous avez une piste d’amélioration, indiquez-la ici, je tâcherai de la vérifier et appliquer rapidement.

1 Like

J’ai regardé un peu avec les webtools Firefox, je vois bien une différence entre un topic court et un topic long qui explique le recouvrement de la box de navigation, mais pour le moment je ne comprends pas trop d’où ça vient.

Dans le cas où ça bug sur un topic court, on voit que la div « topic-progress-wrapper » change un peu par rapport à un topic long.
La class est « docked ember-view » au lieu de « ember-view » et le style est « bottom: xx.yy px, right: 1em; » au lieu de juste « right: 1em; » (voir les captures d’écran en dessous).

Si je fais varier la valeur des px de bottom du cas buggé, ça fait bouger verticalement la box verte et j’arrive à la mettre à un meilleur endroit, mais cette propriété est calculé je ne sais trop comment et revient toute seule à la valeur d’origine, qui a l’air de dépendre aussi de la résolution de l’écran.

Cas buggé, voir la div HTML sélectionnée en bleu:

Et le cas non buggé sur un topic plus long:

Et pareil dans l’outil layout, on voit aussi que dans le cas buggé, la position de la box semble calculée comme un offset par rapport à l’élément « main.ember-application » :

Screenshot from 2026-04-11 09-29-11

Alors que dans le cas non buggé, la position est « fixed » :
Screenshot from 2026-04-11 09-29-02

On dirait aussi qu’il existait déjà un correctif pour ça dans topic.scss (celui de common/base - note: ce correctif n’apparait pas sur le github de c2org), mais que ça ne marche pas vraiment. Quelqu’un a mis un offset fixe depuis le bas, dans le cas ou le topic-progress-wrapper est « docked » avec un commentaire assez explicite:

Screenshot from 2026-04-11 09-50-39

J’ai l’impression que ça doit aussi concerner le menu des admins du forum, pas seulement la box de progrès dans le topic, alors peut-être que c’est mieux de ne pas y toucher.

Et je pense qu’il y a aussi la fonction suivante qui est responsable de bidouiller à la volée des éléments du css relatifs à la position du fameux topic-progress-wrapper quand celui-ci est docké, et aussi de décider s’il doit être docké ou pas selon la taille et la position de certain éléments :

1 Like

Merci pour ces explications et recherches ! tu me sembles tout bien câblé pour rejoindre notre équipe de @developpeurs bénévoles… je me trompe ? :slight_smile:

Tu sais je comprends moyennement ce que je fais en web. J’ai une culture informatique assez large qui m’a permis de savoir à peu près: quoi, où, et comment chercher, et de trouver les fichiers probables où se trouvent l’origine du souci de recouvrement. Mais comprendre réellement le bug et le corriger, ainsi que les éventuels effets de bord d’éventuelles modifications des CSS ou JS sur autre chose, c’est un peu au delà de mes compétences.

1 Like

Tu es certainement mieux armé que moi alors :wink:

Pour info, le github qui concerne Discourse n’est probablement pas à jour, surtout côté correctifs css qui sont appliqués (et modifiés) directement depuis l’interface d’administration de Discourse.

Je serais tenté de penser que c’est ce fameux correctif des 150px qui crée le bug :

Screenshot from 2026-04-11 09-50-39

Quand le topic est court et que la box « topic-progress-wrapper » est donc « docked », si on retire exactement 150px à la position voulue depuis le bas (le bas de quoi, je ne sais pas - attribut « bottom » en tout cas), il a l’air de tomber exactement là où il devrait tomber.

Voilà ce que ça donne sur le topic où j’ai remarqué le problème.

Screenshot from 2026-04-11 11-26-11

Après, ça peut toujours être un hasard.
Le mieux serait de retrouver qui a introduit ces 150px de décalage et de lui demander ce qu’il ou elle voulait faire.

Edit: nan bah ce n’est pas ça, les 150px de décalage ne marchent pas sur tous les topics, il y en a d’autre où ça me laisse la barre de progression en recouvrement d’autres éléments.
Bin je ne sais pas trop, du coup :slight_smile:

Merci d’avoir regardé en tout cas. Vu qu’il fait moche demain, je jeterai un oeil.

1 Like