Size of reply button is influenced by text size preference

[Moin]

Continuing the discussion from New topic controls on Meta:

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.

[NateDhaliwal]

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

[sam (Sam Saffron)]

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

[bloomexperiment (Tracey)]

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

[CocoQuark (Coconut Flavored Quark)]

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

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

<button></button>

Notifications button (simplified code):

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

Thing is, due to this line,

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:

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

---

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

   
   
   
   The buttons on the first line all get the expected height.
   
   However, the notifications button, larger than expected because of the em multiplication, makes the adjacent button on the same line automatically increase in height ↩︎

[sam (Sam Saffron)]

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

[chapoi (Charlie)]

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!

[chapoi (Charlie)]

This should be fixed (PR)

[Moin]

At pinned topics like Share your feedback about the 🆕 iOS Discourse Hub app the reply button is still smaller

[CocoQuark (Coconut Flavored Quark)]

The invisible text ​ 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).

[chapoi (Charlie)]

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