Включение чата меняет отступ main-outlet на мобильных устройствах

Включение чата меняет отступы на моем main-outlet на мобильных устройствах следующим образом:

до

после

Соответствующий CSS для чата находится здесь:


(отступ переопределяется с 1em на 0)

Я понимаю, что функция всё ещё находится в разработке, и многое может измениться. Думаю, логично установить отступ в ноль на странице чата, но в итоге это применяется ко всем страницам.


Второе, что я заметил: на мобильном устройстве клавиатура перекрывает то, что я печатаю (Android/Chrome):

сравните это с Discord, где поле ввода расположено выше клавиатуры

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

Не могли бы вы указать версию Android и версию Chrome?

Вы уверены, что это исходит от чата? Насколько мне известно, у нас нет файла chat-mobile.scss.

Сначала давайте уточню, правильно ли я установил чат.

Вчера я пересобрал свой экземпляр. Я не включал чат в файл app.yml — насколько я понимаю, теперь это плагин, который входит в состав ядра Discourse?


Ссылка ведёт сюда: discourse/plugins/chat at main · discourse/discourse · GitHub

Я найду, откуда берётся этот файл chat-mobile.scss.

Да, сейчас это основной плагин

Возможно, я что-то упускаю… но на данный момент, насколько я помню, я не знаю, где это находится в плагине. У нас есть что-то с отступами, но это должно быть ограничено областью .has-full-page-chat, и поэтому не должно влиять на другие страницы.

Я нашёл, похоже, это из темы Discourse Air, которую я использую

Я использую её вместе со своими собственными CSS-переопределениями, поэтому в данном случае, думаю, это проблема «моих» настроек.


Я разберусь с проблемой клавиатуры. Я предполагаю, что такое поведение не является намеренным, верно?

Да, не является :slight_smile:

Я локализовал проблему. У меня есть несколько компонентов, использующих слот below-site-header (например, вращающийся баннер и панель навигации). Думаю, их высота не учитывается должным образом?

полный скриншот

Это кастомные компоненты, которые я написал, так что, возможно, это снова проблема «меня», но также возможно, что проблема возникает с любым содержимым в below-site-header, и тогда это уже становится проблемой «нас» :slight_smile:

Но как это будет работать? У вас останется 50 пикселей по высоте для отображения чата.

Я думаю, что основная проблема заключается в том, что при касании поля ввода чата экран перемещается в самый верх страницы, и содержимое блока below-site-header становится видимым.

пример видео

Кажется логичнее, если бы страница перемещалась так, чтобы низ блока чата оказался прямо над клавиатурой. Или же сделать блок поля ввода «липким» к низу страницы (и верху клавиатуры), чтобы он всегда был виден и накладывался на всё остальное.

Независимо от идеального решения, поле ввода должно быть абсолютным приоритетом для отображения на экране, даже если доступно всего 50 пикселей.