Je pense que le bouton de réponse est de la bonne taille et que les boutons de gauche ne le sont pas.
Contrairement aux autres boutons de la zone .topic-footer-main-buttons, le bouton de notification de sujet est encapsulé par une div (.topic-notifications-button).
Tous les boutons de la zone, y compris le bouton de réponse (code simplifié) :
<button></button>
Bouton de notification (code simplifié) :
<div class="topic-notifications-button">
<button></button>
</div>
Le problème est que, à cause de cette ligne,
La propriété font-size: var(--font-up-1) est appliquée à la fois à l’encapsulation du bouton de notification et au bouton à l’intérieur.
Comme vous le savez, les valeurs em se multiplient progressivement du parent à l’enfant.
Le résultat peut être illustré comme suit :
<div class="topic-notifications-button" style="font-size: 1.15em;">
<button style="font-size: 1.15em;"></button>
</div>
1.15 × 1.15 est le problème. La valeur finale de font-size sur l’élément button de notification est plus grande que prévu.
Ce n’est pas évident au premier coup d’œil car les boutons frères (clé, partage, signet, etc.) ajustent leur hauteur à l’élément le plus grand sur la même ligne[^1], donc le bouton de notification de sujet ne ressort pas comme étant “trop grand”, puisque tous les boutons de ce conteneur ont la même hauteur.
[^1] : Cela peut être illustré si nous ajoutons quelques boutons supplémentaires dans le conteneur pour faire passer le contenu à la ligne :
Les boutons de la première ligne prennent tous la hauteur attendue.
Cependant, le bouton de notification, plus grand que prévu à cause de la multiplication par
em, fait que le bouton adjacent sur la même ligne augmente automatiquement de hauteur.
La suppression de la ligne mise en surbrillance dans le onebox GitHub ci-dessus devrait résoudre le problème :
