Penso che il pulsante di risposta abbia la giusta dimensione e i pulsanti a sinistra no.
A differenza degli altri pulsanti nell’area .topic-footer-main-buttons, il pulsante delle notifiche dell’argomento è racchiuso da un div (.topic-notifications-button).
Tutti i pulsanti nell’area, incluso il pulsante di risposta (codice semplificato):
<button></button>
Pulsante notifiche (codice semplificato):
<div class="topic-notifications-button">
<button></button>
</div>
Il fatto è che, a causa di questa riga,
La proprietà font-size: var(--font-up-1) viene applicata sia al contenitore del pulsante delle notifiche che al pulsante al suo interno.
Come sapete, i valori em si moltiplicano incrementalmente dal genitore al figlio.
Il risultato può essere illustrato come:
<div class="topic-notifications-button" style="font-size: 1.15em;">
<button style="font-size: 1.15em;"></button>
</div>
1.15 × 1.15 è il problema. Il valore finale di font-size sull’elemento button delle notifiche è più grande del previsto.
Non è ovvio a prima vista perché i pulsanti fratelli (chiave inglese, condividi, segnalibro, ecc.) adattano la loro altezza all’elemento più alto sulla stessa riga[1], quindi il pulsante delle notifiche dell’argomento non spicca come “troppo alto”, poiché tutti i pulsanti in questo contenitore hanno la stessa altezza.
La rimozione della riga evidenziata nel GitHub onebox sopra dovrebbe risolvere il problema:
Questo può essere illustrato se aggiungiamo alcuni pulsanti aggiuntivi nel contenitore per far andare a capo il contenuto:
I pulsanti sulla prima riga ottengono tutti l’altezza prevista.
Tuttavia, il pulsante delle notifiche, più grande del previsto a causa della moltiplicazioneem, fa sì che il pulsante adiacente sulla stessa riga aumenti automaticamente di altezza. ↩︎
