La dimensione del pulsante di risposta è influenzata dalla preferenza di dimensione del testo

Continuando la discussione da Nuovi controlli per gli argomenti su Meta:

Penso che una parte di

rendi tutti i pulsanti della stessa dimensione del carattere

non funzioni in tutti i casi.

Ho scelto una dimensione del testo più piccola nelle mie preferenze e ciò sembra influenzare la dimensione del pulsante di risposta. È più piccolo degli altri pulsanti. Interessante, non diventa più grande quando scelgo una dimensione del carattere più grande.

6 Mi Piace

Ho la mia taglia al normale e vedo anche questo problema.

1 Mi Piace

Ciao @Moin grazie per la segnalazione, il nostro designer ne è a conoscenza ma non ha ancora trovato una soluzione, hai qualche idea su come potremmo risolvere?

È in fondo agli argomenti sul cellulare?
Forse è influenzato dalla dimensione del testo di “Rispondi” su desktop/tablet, che non è visibile sul cellulare.

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:


  1. 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 moltiplicazione em, fa sì che il pulsante adiacente sulla stessa riga aumenti automaticamente di altezza. ↩︎

7 Mi Piace

Grazie mille per il debug, lo passo ai nostri designer :abbracci:

3 Mi Piace

Sapevo che era il pulsante di notifica a causare il problema, ma non l’avevo ancora individuato, quindi; dannazione, è una bella scoperta! Avevo in qualche modo trascurato i doppi em applicati lì! Non l’ho ancora verificato, ma è molto probabile.

Grazie! :clap:

6 Mi Piace

Questo dovrebbe essere risolto (PR)

2 Mi Piace

Nei topic fissati come Share your feedback about the 🆕 iOS Discourse Hub app il pulsante di risposta è ancora più piccolo

2 Mi Piace

Il testo invisibile \u0026ZeroWidthSpace; accanto all’icona svg nell’icona :pushpin: select kit aumenta l’altezza del pulsante. Qualsiasi testo in qualsiasi pulsante ne aumenta allo stesso modo l’altezza (e i pulsanti fratelli ne adattano l’altezza di conseguenza, come il comportamento discusso sopra).

Sì, è qualcosa per cui aprirò un argomento interno. Non sono sicuro se &ZeroWidthSpace; stia causando problemi a causa delle mie modifiche, o se sia sempre stato così e ce ne siamo accorti solo ora in questa configurazione.

1 Mi Piace

Questo argomento è stato chiuso automaticamente dopo 2 giorni. Non sono più consentite nuove risposte.