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.
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.
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:
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:
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. ↩︎
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.
Der unsichtbare Text \u0026ZeroWidthSpace; neben dem SVG-Symbol im 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 ​ 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.