Die Größe des Antwort-Buttons wird durch die Texteinstellung beeinflusst

Fortsetzung der Diskussion von Neue Themensteuerelemente auf Meta:

Ich denke, ein Teil von

alle Schaltflächen gleich groß machen
funktioniert nicht in allen Fällen.

Ich habe in meinen Einstellungen eine kleinere Textgröße gewählt, und das scheint die Größe der Antwortschaltfläche zu beeinflussen. Sie ist kleiner als die anderen Schaltflächen. Interessanterweise wird sie nicht größer, wenn ich eine größere Schriftgröße wähle.

6 „Gefällt mir“

Ich habe meine Größe auf normal und sehe dieses Problem auch.

1 „Gefällt mir“

Hallo @Moin, danke für die Meldung. Unser Designer ist sich dessen bewusst, hat aber noch keine Lösung gefunden. Haben Sie eine Idee, wie wir das beheben könnten?

Befindet sich dies am unteren Rand von Themen auf Mobilgeräten?
Vielleicht wird es von der Textgröße von “Antworten” auf Desktop/Tablet beeinflusst, die auf Mobilgeräten nicht sichtbar ist.

Ich finde, die Schaltfläche zum Antworten hat die richtige Größe, aber die Schaltflächen auf der linken Seite nicht.

Im Gegensatz zu den anderen Schaltflächen im Bereich .topic-footer-main-buttons ist die Schaltfläche für Benachrichtigungen in ein div (.topic-notifications-button) eingeschlossen.

Alle Schaltflächen in diesem Bereich, einschließlich der Antwortschaltfläche (vereinfachter Code):

<button></button>

Benachrichtigungsschaltfläche (vereinfachter Code):

<div class="topic-notifications-button">
  <button></button>
</div>

Das Problem ist, dass aufgrund dieser Zeile,

Die Eigenschaft font-size: var(--font-up-1) sowohl auf die Benachrichtigungsschaltflächen-Umrandung als auch auf die darin enthaltene Schaltfläche angewendet wird.
Wie Sie wissen, multiplizieren sich em-Werte schrittweise von Eltern zu Kind.

Das Ergebnis kann wie folgt veranschaulicht werden:

<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

1,15 × 1,15 ist das Problem. Der endgültige Wert von font-size für das <button>-Element der Benachrichtigungsschaltfläche ist größer als erwartet.

Es ist auf den ersten Blick nicht offensichtlich, da die Geschwisterschaltflächen (Schraubenschlüssel, Teilen, Lesezeichen usw.) ihre Höhe an das höchste Element in derselben Zeile anpassen[1]. Daher fällt die Benachrichtigungsschaltfläche nicht als “zu hoch” auf, da alle Schaltflächen in diesem Container die gleiche Höhe haben.

Das Entfernen der hervorgehobenen Zeile in der obigen GitHub-Onebox sollte das Problem beheben:


  1. Dies kann veranschaulicht werden, wenn wir ein paar zusätzliche Schaltflächen in den Container einfügen, damit der Inhalt umgebrochen wird:



    Die Schaltflächen in der ersten Zeile erhalten alle die erwartete Höhe.

    Die Benachrichtigungsschaltfläche, die aufgrund der em-Multiplikation größer als erwartet ist, bewirkt jedoch, dass die benachbarte Schaltfläche in derselben Zeile automatisch an Höhe gewinnt. ↩︎

7 „Gefällt mir“

Vielen Dank für das Debugging, ich gebe das an unsere Designer weiter :hugs:

3 „Gefällt mir“

Ich wusste, dass der Benachrichtigungsbutton das Problem verursachte, hatte es aber noch nicht genau herausgefunden, also, verdammt, das ist ein guter Fund! Ich hatte die doppelten ems, die dort angewendet wurden, irgendwie übersehen! Habe es noch nicht überprüft, aber es ist sehr wahrscheinlich.

Danke! :clap:

6 „Gefällt mir“

Dies sollte behoben sein (PR)

2 „Gefällt mir“

Bei angepinnten Themen wie Share your feedback about the 🆕 iOS Discourse Hub app ist der Antwort-Button immer noch kleiner

2 „Gefällt mir“

Der unsichtbare Text \u0026ZeroWidthSpace; neben dem SVG-Symbol im :pushpin: Auswählen-Kit erhöht die Button-Höhe. Jeder Text in einem Button erhöht auf ähnliche Weise seine Höhe (und die Geschwister-Buttons passen ihre Höhe entsprechend an, wie das oben diskutierte Verhalten).

Ja, das ist etwas, wofür ich ein internes Thema eröffnen werde. Ich bin mir nicht sicher, ob &ZeroWidthSpace; Probleme verursacht, weil es an meinen Änderungen liegt oder ob es schon immer so war und wir es nur jetzt in diesem Setup bemerkt haben.

1 „Gefällt mir“

Dieses Thema wurde nach 2 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr möglich.