Problem mit dem responsiven Layout von "in diesem Thema" suchen mit "Ubuntu" Basisschriftart

Hallo, ich habe ein seltsames Darstellungsproblem bei bestimmten Zoomstufen mit Firefox auf meiner Website. Das Problem ist, dass der Text für die Suche “in diesem Thema” auf zwei Zeilen umgebrochen wird. Es scheint nur aufzutreten, wenn die System-Basisschriftart auf “Ubuntu” eingestellt ist und die Zoomstufe 100 % oder 110 % beträgt. Außerdem ist meine Discourse-Profil-Oberflächenschriftgröße auf “Größer” eingestellt. Ich sehe dasselbe Verhalten sowohl mit Sam’s Simple Theme als auch mit dem standardmäßigen Discourse Light Theme, und ich habe versucht, alle meine Theme-Komponenten zu deaktivieren. Es scheint also nicht mit anderen Anpassungen zusammenzuhängen, außer mit der Basisschriftart.

Discourse Meta mit Sam’s Simple Theme und standardmäßiger Arial-Schriftart, kein Fehler (auch auf meiner Website mit Arial-Basisschriftart gleich)

Mein Forum mit Sam’s Simple Theme und “Ubuntu” Basisschriftart

100% Zoom, Fehler vorhanden:

110% Zoom, Fehler vorhanden:

120% Zoom, kein Fehler:

90% Zoom, kein Fehler:

1 „Gefällt mir“

Dies wurde als UX neu kategorisiert, da es immer noch funktioniert, aber das Layout nicht stimmt. Danke für die Meldung! Dies sollte eine einfache Lösung sein, wir müssen verhindern, dass dieser Text mit etwas CSS umbricht.

3 „Gefällt mir“

Vielen Dank, Kris! Ich war mir nicht sicher, ob es sich um „UX“ handelt, wenn es nichts mit dem Hinzufügen/Entfernen/Verschieben von UX-Elementen zu tun hat. Ich bin gespannt auf die CSS-Korrektur, da ich auch bei meinen eigenen Theme-Anpassungen an einigen Stellen Probleme mit dem Zeilenumbruch hatte, aber das ist meine eigene Schuld. :wink:

1 „Gefällt mir“

Das sollte es beheben:

Es ist nur

white-space: nowrap angewendet auf das CSS des Buttons

4 „Gefällt mir“

Vielen Dank, Kris! Mit dieser Korrektur, die zu einer benutzerdefinierten Theme-Komponente hinzugefügt wurde, ist es jetzt viel besser. Es gibt jetzt eine neue Eigenart, bei der Scrollbalken nur bei 100% Zoom angezeigt werden und dies etwa 5 Pixel horizontale Bewegung ermöglicht:

1 „Gefällt mir“