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

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

Продолжая обсуждение из Новые элементы управления темами на Meta:

Я считаю, что часть

сделать все кнопки одинакового размера шрифта

не работает во всех случаях.

В своих настройках я выбрал меньший размер текста, и, похоже, это влияет на размер кнопки ответа. Она меньше, чем другие кнопки. Интересно, что при выборе большего размера шрифта она не увеличивается.

_20241218_005550
_20241218_005550720×133 7.62 KB

6 лайков
3

У меня размер установлен как обычный, и я тоже вижу эту проблему.

1 лайк
8

Привет @Moin, спасибо за сообщение. Наш дизайнер в курсе проблемы, но пока не нашёл решения. Есть какие-то идеи, как мы могли бы это исправить?

9

Это внизу тем на мобильных устройствах?
Возможно, это связано с размером текста «Ответ» на рабочем столе/планшете, который не виден на мобильных устройствах.

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 лайков
11

Огромное спасибо за отладку! Передаю это нашим дизайнерам :hugs:

3 лайка
13

Я знал, что проблема в кнопке уведомлений, но еще не мог точно определить её, так что черт, это отличное обнаружение! Я как-то упустил двойные em-отступы, которые там применяются! Пока не проверил, но скорее всего именно так.

Спасибо! :clap:

6 лайков
14

Это должно быть исправлено (PR)

2 лайка
16

В закреплённых темах, например Share your feedback about the 🆕 iOS Discourse Hub app, кнопка «Ответить» по-прежнему меньше.

_20241223_135200
_20241223_135200720×133 6.89 KB

2 лайка
17

Невидимый текст &ZeroWidthSpace; рядом с иконкой SVG в наборе для выбора :pushpin: увеличивает высоту кнопки. Любой текст в любой кнопке аналогично увеличивает её высоту (а соседние кнопки корректируют свою высоту соответствующим образом, как обсуждалось выше).

18

Да, я открою по этому поводу внутреннюю тему. Не уверен, что проблема с &ZeroWidthSpace; вызвана моими изменениями, или она существовала всегда, а мы просто заметили её сейчас в этой настройке.

1 лайк
19

Эта тема была автоматически закрыта через 2 дня. Новые ответы больше не допускаются.