# La taille du bouton de réponse est influencée par la préférence de taille du texte

**URL:** <https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041>\
**Category:** UX\
**Tags:** mobile\
**Created:** [Décembre 18, 2024, 12:09 UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041 "2024-12-18T00:09:32Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [Décembre 20, 2024, 11:17 UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/10 "2024-12-20T23:17:22Z")

</div>

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`).

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/4/7/847c854d5a627e9e96a88db3b9ad4545100d1a63.png)

Tous les boutons de la zone, y compris le bouton de réponse (code simplifié) :

```html
<button></button>

```

Bouton de notification (code simplifié) :

```html
<div class="topic-notifications-button">
  <button></button>
</div>

```

Le problème est que, à cause de cette ligne,

> <https://github.com/discourse/discourse/blob/fa0ad0306c06250f8af5f842d86b86f609fe02ea/app/assets/stylesheets/mobile/topic-footer.scss#L13>

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 :

```html
<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 :

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/d/c/5dc06fc0dcee5251cece67842807e4099844660f.png)  
  
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 :

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/8/b/58b7345a76a0cd405cd83e98dfea1e6f1e62a69b.png)

---

_[View the full topic](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041)._