Creo que el botón de respuesta tiene el tamaño correcto y los botones de la izquierda no.
A diferencia de los otros botones en el área .topic-footer-main-buttons, el botón de notificaciones del tema está envuelto por un div (.topic-notifications-button).
Todos los botones del área, incluido el botón de respuesta (código simplificado):
<button></button>
Botón de notificaciones (código simplificado):
<div class="topic-notifications-button">
<button></button>
</div>
El caso es que, debido a esta línea,
La propiedad font-size: var(--font-up-1) se aplica tanto al contenedor del botón de notificaciones como al botón interior.
Como saben, los valores em se multiplican incrementalmente de padre a hijo.
El resultado se puede ilustrar como:
<div class="topic-notifications-button" style="font-size: 1.15em;">
<button style="font-size: 1.15em;"></button>
</div>
1.15 × 1.15 es el problema. El valor final de font-size en el elemento button de notificaciones es mayor de lo esperado.
No es obvio a primera vista porque los botones hermanos (llave inglesa, compartir, marcador, etc.) ajustan su altura al elemento más alto en la misma línea[1], por lo que el botón de notificaciones del tema no destaca como “demasiado alto”, ya que todos los botones de este contenedor tienen la misma altura.
Eliminar la línea resaltada en el onebox de GitHub anterior debería resolver el problema:
Esto se puede ilustrar si agregamos algunos botones adicionales en el contenedor para que el contenido se ajuste:
Los botones de la primera línea obtienen la altura esperada.
Sin embargo, el botón de notificaciones, más grande de lo esperado debido a la multiplicación deem, hace que el botón adyacente en la misma línea aumente automáticamente de altura. ↩︎
