Размер кнопки ответа зависит от предпочтений по размеру текста

Внести вклад UX
10

Я считаю, что кнопка «Ответить» имеет правильный размер, а кнопки слева — нет.

В отличие от других кнопок в области .topic-footer-main-buttons, кнопка уведомлений о теме обернута в div (.topic-notifications-button).

image
image350×127 2.43 KB

Все кнопки в этой области, включая кнопку «Ответить» (упрощённый код):

<button></button>

Кнопка уведомлений (упрощённый код):

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

Дело в том, что из-за этой строки:

Свойство font-size: var(--font-up-1) применяется как к обёртке кнопки уведомлений, так и к самой кнопке внутри.
Как вы знаете, значения em кумулятивно умножаются от родителя к потомку.

Результат можно проиллюстрировать так:

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

1.15 × 1.15 — это и есть проблема. Итоговое значение font-size для элемента кнопки уведомлений <button> оказывается больше ожидаемого.

На первый взгляд это не очевидно, потому что соседние кнопки (ключ, поделиться, закладка и т. д.) подстраивают свою высоту под самый высокий элемент на той же строке[1], поэтому кнопка уведомлений о теме не выделяется как «слишком высокая», так как все кнопки в этом контейнере имеют одинаковую высоту.

Удаление выделенной строки в GitHub-блоке кода выше должно решить проблему:

image
image351×120 1.64 KB

  1. Это можно проиллюстрировать, если добавить несколько дополнительных кнопок в контейнер, чтобы контент перенёсся на новую строку:

    image
    image350×167 1.95 KB


    Все кнопки на первой строке получают ожидаемую высоту.

    Однако кнопка уведомлений, которая из-за умножения em оказывается больше ожидаемого, заставляет соседнюю кнопку на той же строке автоматически увеличить свою высоту. ↩︎

7 лайков