Большой разрыв между чатом и контейнером темы

Когда мы активируем чат livestream для наших мероприятий, в div.container.post::before появляется большой разрыв. Отступы в норме, пока я не запускаю трансформацию с помощью тега.

Я пробовал экспериментировать с CSS, чтобы настроить этот элемент, но не смог разобраться. Если я скрываю ::before, появляется ::after. Когда я скрываю оба, разрыв сохраняется.

Вот страница, если кто-то захочет посмотреть её в реальном времени.

Такого разрыва нет на официальном скриншоте, поэтому я не понимаю, что происходит:

Отступы должны относиться к временной шкале темы (изображение выше для справки), поэтому без clearfix пространство всё ещё присутствует. Пространство для временной шкалы остаётся, даже если есть только один пост, и даже если вы не администратор, где временная шкала была бы пустой и отображалась как пустое пространство.

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

@media screen and (min-width: 925px) {
    .container.posts:not(:has(.timeline-scrollarea-wrapper)) {
        grid-template-columns: 100%;
    }
}

Примечание: .timeline-scrollarea-wrapper появляется только если есть достаточно постов для отображения временной шкалы, поэтому это работает.

Для администраторов (см. плавающую кнопку):

Для неадминистраторов:

Если вы хотите оставить немного места для кнопки настроек, вы можете настроить или подправить эту часть:

grid-template-columns: 90% 10%;
grid-template-columns: calc(100% - 80px) 80px;

Помогло ли это понять, что происходит с макетом, или полностью решить проблему? Мы видим, что clearfix на вашем скриншоте занимает немного другое пространство, чем мы смогли воспроизвести, поэтому мы не на 100% уверены, что это решает проблему.

Лично я оставил бы всё как есть для согласованности с наличием или отсутствием временной шкалы, но если вы хотите внести изменения, приведённый выше CSS должен быть достаточным для заполнения полной ширины, когда временная шкала темы пуста. Дайте знать, если у вас возникнут проблемы с этим или понадобится помощь с реализацией! Спасибо.

4 лайка