Шапка ломается на экранах среднего размера в теме Horizon

Заголовок на Horizon в большинстве случаев работает отлично, как на мобильных устройствах, так и на настольных компьютерах:

Однако у меня есть складной телефон с необычным соотношением сторон. К сожалению, строка поиска и аватар исчезают, и всё немного ломается:

Это происходит в диапазоне ширины 640–767 пикселей — к сожалению, именно там находится мой складной телефон!

Я тоже могу воспроизвести эту проблему — похоже, дело в классе contents внутри заголовка, который отображается как flex на экранах складных телефонов/маленьких планшетов в диапазоне @media (min-width: 640px) and (max-width: 767px):

Это можно исправить, изменив свойство на contents для этого диапазона ширины: scss @media (min-width: 640px) and (max-width: 767.98px) { .d-header>wrap .contents { display: contents!important; } } Кажется, в Discourse граница между планшетом и рабочим столом установлена на 768px.

Но я считаю, что это настройка лишь усугубляет ситуацию!! Если её отключить, заголовок отображается некорректно на всех размерах до 767 пикселей, если устройство явно не указано как мобильное.

По крайней мере, мой складной телефон доволен. Просто не мой десктопный браузер, когда экран становится маленьким.

Кажется, эта настройка теперь исчезла, поэтому обходного пути больше нет.

Проблема с Horizon всё ещё сохраняется.

Не могли бы вы помочь мне с диагностикой, потому что при воспроизведении через эмулятор десктопа (у меня нет складного телефона) я не вижу ничего необычного.

Я могу воспроизвести проблему, просто уменьшив окно браузера на рабочем столе:

При достаточной ширине:

Чуть уже — и начинают происходить некоторые странные вещи (боковая панель и заголовок становятся белыми), и я не совсем уверен, что это сделано намеренно:

Ещё уже — проблема становится очевидной (т.е. размер экрана складного телефона)

Очень узко (обычный размер телефона) — всё снова в порядке.

Это сделано намеренно.

Я честно не понимаю, о чём речь, это при ширине 644 пикселя:

Аватар не исчезает ни при какой ширине.

Можешь воспроизвести это здесь, на Meta (с Horizon)?

Ах — я забыл, что так можно делать для воспроизводимых тестов! Нет, у меня это не воспроизводится ни на Meta, ни с Horizon.

Похоже, проблема на стороне моего сайта — я займусь её диагностикой и сообщу, что обнаружу. Спасибо, что разобрались в этом!!!

Вау, оказалось surprisingly легко найти проблему.

Этот компонент темы несовместим с Horizon:

И мне очень нравится этот TC!! Я не выношу, когда меню прыгает вправо на мобильных устройствах. Это такие мелочи, которые сводят нас с ума (ну, некоторых из нас), да? Может, мне нравится, когда оно слева, потому что я левша.

Да, я понимаю.

Не стесняйтесь оставить сообщение в оригинальной теме Horizon Theme, где мы говорили:

я тоже использую этот компонент (я тоже не очень люблю иконку на боковой панели, хотя сам не использую Horizon) и уже работал над ним. Попробую исправить это, Нейтан.

привет, Натан, у меня есть исправление:

Лилли, ты крутая! Сейчас с удовольствием ем бургер левой рукой и играю в Horizon на своём складном ноутбуке.

Прекрасно!!!