Проблема с адаптивной версткой при поиске «в этой теме» с базовым шрифтом «Ubuntu»

Привет! У меня возникла странная проблема с отображением на определённых уровнях масштабирования в Firefox на моём сайте. Проблема заключается в том, что текст поиска «в этой теме» переносится на две строки. Это происходит только при использовании системного базового шрифта «Ubuntu» и уровне масштабирования 100% или 110%. Также у меня в настройках профиля Discourse размер шрифта интерфейса установлен на «Больше». Я наблюдаю такое же поведение как с простой темой Сэма, так и с темой Discourse по умолчанию (светлая). Я также отключил все компоненты моих тем, поэтому проблема, похоже, не связана с другими настройками, кроме стиля базового шрифта.

Discourse Meta с простой темой Сэма и базовым шрифтом Arial, баг отсутствует (так же и на моём сайте с базовым шрифтом Arial)

Мой форум с простой темой Сэма и базовым шрифтом «Ubuntu»

Масштаб 100%, баг присутствует:

Масштаб 110%, баг присутствует:

Масштаб 120%, баг отсутствует:

Масштаб 90%, баг отсутствует:

1 лайк

Переклассифицировал это как ux, так как функционал работает, но верстка нарушена. Спасибо за сообщение! Это должно быть легко исправить: нам нужно предотвратить перенос этого текста с помощью небольшого CSS.

3 лайка

Огромное спасибо, Крис! Я не был уверен, что это «UX», если это не связано с добавлением/удалением/перемещением элементов UX. Мне интересно посмотреть на исправление CSS, потому что я тоже сталкивался с проблемами переноса текста в нескольких местах при кастомизации своей темы, но это моя собственная вина. :wink:

1 лайк

Это должно исправить проблему:

https://github.com/discourse/discourse/pull/19904/files

Просто примените к CSS кнопки свойство

white-space: nowrap

4 лайка

Огромное спасибо, Крис! После добавления этого исправления в компонент пользовательской темы стало намного лучше. Теперь появилась новая особенность: полосы прокрутки появляются только при масштабе 100%, что позволяет осуществлять горизонтальное перемещение примерно на 5 пикселей:

1 лайк