Size of reply button is influenced by text size preference

Contribute UX
10

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
image350×127 2.43 KB

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,

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:

image
image351×120 1.64 KB

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

    image
    image350×167 1.95 KB


    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 ↩︎

7 Likes