# Size of reply button is influenced by text size preference

**URL:** https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041
**Category:** UX
**Tags:** mobile
**Created:** [December 18, 2024, 12:09am 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:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [December 18, 2024, 12:09am UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/1 "2024-12-18T00:09:32Z")

</div>

Continuing the discussion from [New topic controls on Meta](https://meta.discourse.org/t/new-topic-controls-on-meta/341987/6):

I think a part of

> make all buttons same font-size

doesn’t work in all cases.

I have chosen a smaller text size in my preferences and that seems to influence the size of the reply button. It’s smaller than the other buttons. Interestingly, it does not get bigger when I choose a larger font size.

 ![_20241218_005550](https://global.discourse-cdn.com/meta/original/4X/c/b/b/cbb26c5829cec1c4aa2383b3d6cd6d3717944816.jpeg)

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [December 18, 2024, 4:19am UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/3 "2024-12-18T04:19:45Z")

</div>

I have my size at normal and I also see this problem.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 20, 2024, 1:41am UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/8 "2024-12-20T01:41:40Z")

</div>

Hi @Moin thanks for reporting, our designer is aware but has not found a fix yet, any ideas of how we could resolve?

---

<div class="post-metadata">

### Author: ![traceymoko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/traceymoko/32/483235_2.png) [@traceymoko](https://meta.discourse.org/u/traceymoko)
#### Post date: [December 20, 2024, 2:35am UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/9 "2024-12-20T02:35:00Z")

</div>

Is this at the bottom of topics on mobile?  
Perhaps it is influenced by the text size of “Reply” on desktop/tablet, which is not visible on mobile

---

<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: [December 20, 2024, 11:17pm UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/10 "2024-12-20T23:17:22Z")

</div>

I think the reply button is the right size and the buttons on the left are not.

Unlike the other buttons in the `.topic-footer-main-buttons` area, the topic notifications button is wrapped by a div (`.topic-notifications-button`).

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

All buttons in the area, including the reply button (simplified code):

```html
<button></button>

```

Notifications button (simplified code):

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

```

Thing is, due to this line,

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

The property `font-size: var(--font-up-1)` is applied to both the notifications button wrap **and** the button inside.  
As you know, `em` values incrementally multiply from parent to child.

The result can be illustrated as:

```html
<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

```

1.15 × 1.15 is the issue. The final value of the `font-size` on the notification button `<button>` element is larger than expected.

It’s not obvious at first glance because the sibling buttons (wrench, share, bookmark, etc) adjust their height to the tallest element on the same _line_\[1\], so the topic notifications button doesn’t stand out as “too tall”, since all the buttons in this container are the same height.

Removing the highlighted line in the GitHub onebox above should resolve the issue:

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

* * *

1. This can be illustrated if we add a few additional buttons in the container to make the content wrap:

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 20, 2024, 11:37pm UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/11 "2024-12-20T23:37:09Z")

</div>

Thanks so much for debugging, passing this on to our designers 🤗

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 21, 2024, 2:19am UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/13 "2024-12-21T02:19:56Z")

</div>

I knew it was the notification button that was causing the issue but hadn’t pinpointed it yet so; damn, that’s a good find! I had sorta overlooked the double ems being applied there! Haven’t verified it yet but very likely the case.

Thanks! 👏

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 23, 2024, 8:12am UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/14 "2024-12-23T08:12:56Z")

</div>

This should be fixed ([PR)](https://github.com/discourse/discourse/pull/30427)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [December 23, 2024, 12:54pm UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/16 "2024-12-23T12:54:32Z")

</div>

At pinned topics like [Share your feedback about the 🆕 iOS Discourse Hub app](https://meta.discourse.org/t/share-your-feedback-about-the-ios-discourse-hub-app/340872) the reply button is still smaller

 ![_20241223_135200](https://global.discourse-cdn.com/meta/original/4X/2/1/4/214d5f38707aed6373be69f561b59de4f07c92cb.jpeg)

---

<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: [December 23, 2024, 1:33pm UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/17 "2024-12-23T13:33:50Z")

</div>

The invisible text `&ZeroWidthSpace;` next to the svg icon in the 📌 select kit increases the button height. Any text in any button similarly increases its height (and the sibling buttons adjust their height accordingly, like the behavior discussed above).

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 23, 2024, 11:57pm UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/18 "2024-12-23T23:57:20Z")

</div>

Yeah, that’s something I’ll open an internal topic for. I’m not sure whether `&ZeroWidthSpace;` causing issues is due to my changes, or always was the case and we just noticed it now in this setup.

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 25, 2024, 9:13am UTC](https://meta.discourse.org/t/size-of-reply-button-is-influenced-by-text-size-preference/343041/19 "2024-12-25T09:13:54Z")

</div>

This topic was automatically closed after 2 days. New replies are no longer allowed.