Acho que o botão de resposta tem o tamanho certo e os botões à esquerda não.
Ao contrário dos outros botões na área .topic-footer-main-buttons, o botão de notificações do tópico é envolvido por uma div (.topic-notifications-button).
Todos os botões na área, incluindo o botão de resposta (código simplificado):
<button></button>
Botão de notificações (código simplificado):
<div class="topic-notifications-button">
<button></button>
</div>
O problema é que, devido a esta linha,
A propriedade font-size: var(--font-up-1) é aplicada tanto ao contêiner do botão de notificações quanto ao botão interno.
Como você sabe, valores em se multiplicam incrementalmente do pai para o filho.
O resultado pode ser ilustrado como:
<div class="topic-notifications-button" style="font-size: 1.15em;">
<button style="font-size: 1.15em;"></button>
</div>
1.15 × 1.15 é o problema. O valor final de font-size no elemento button de notificações é maior do que o esperado.
Não é óbvio à primeira vista porque os botões irmãos (chave de fenda, compartilhar, marcador, etc.) ajustam sua altura ao elemento mais alto na mesma linha[1], então o botão de notificações do tópico não se destaca como “muito alto”, já que todos os botões neste contêiner têm a mesma altura.
Remover a linha destacada no onebox do GitHub acima deve resolver o problema:
Isso pode ser ilustrado se adicionarmos alguns botões adicionais no contêiner para que o conteúdo quebre a linha:
Os botões na primeira linha recebem a altura esperada.
No entanto, o botão de notificações, maior do que o esperado devido à multiplicação deem, faz com que o botão adjacente na mesma linha aumente automaticamente de altura. ↩︎
