Problème d'agencement réactif de la recherche "dans ce sujet" avec la police de base "Ubuntu"

Salut, j’ai un problème de rendu étrange à certains niveaux de zoom avec Firefox sur mon site. Le problème est que le texte de recherche « dans ce sujet » passe à la ligne. Cela ne semble se produire qu’avec la police de base du système définie sur « Ubuntu » et le niveau de zoom à 100 % ou 110 %. J’ai également défini ma préférence de taille de police d’interface de profil Discourse sur « Plus grand ». Je constate le même comportement avec le thème simple de Sam ainsi qu’avec le thème clair par défaut de Discourse, et j’ai essayé de désactiver tous mes composants de thème, donc cela ne semble pas être lié à une autre personnalisation à part le style de police de base.

Discourse Meta avec le thème simple de Sam et la police Arial par défaut, pas de bug (également identique sur mon site avec la police de base Arial)

Mon forum avec le thème simple de Sam et la police de base « Ubuntu »

Zoom 100 %, bug présent :

Zoom 110 %, bug présent :

Zoom 120 %, pas de bug :

Zoom 90 %, pas de bug :

1 « J'aime »

Reclassé en UX car cela fonctionne toujours, mais la mise en page est incorrecte. Merci de l’avoir signalé ! Ce devrait être une correction simple, nous devrons empêcher ce texte de passer à la ligne avec un peu de CSS.

3 « J'aime »

Merci beaucoup Kris ! Je n’étais pas sûr si ce serait de l’« UX » si ce n’est pas lié à l’ajout/suppression/déplacement d’éléments UX. Je serai intéressé de voir le correctif CSS, car j’ai rencontré des problèmes de retour à la ligne à plusieurs endroits avec mes propres personnalisations de thème, mais c’est de ma faute. :wink:

1 « J'aime »

Cela devrait résoudre le problème :

Il s’agit simplement de white-space: nowrap appliqué au CSS du bouton.

4 « J'aime »

Merci beaucoup Kris ! Avec cette correction ajoutée à un composant de thème personnalisé, c’est beaucoup mieux maintenant. Il y a un nouveau comportement étrange où les barres de défilement n’apparaissent qu’à 100 % de zoom et cela permet environ 5 pixels de mouvement horizontal :

1 « J'aime »