Gran brecha entre el chat y el contenedor del tema

[putty (Derek Putnam)]

Cuando activamos el chat de livestream para nuestros eventos, aparece este gran espacio en el div.container.post::before. El espaciado está bien hasta que activo la transformación con la etiqueta.

Intenté modificar el CSS para ajustar este elemento, pero no pude resolverlo. Si oculto el ::before, aparece un ::after. Cuando oculto ambos, el espaciado persiste.

Aquí está la página si alguien quiere verla en vivo.

Este espaciado no aparece en la captura de pantalla oficial, así que no estoy seguro de lo que está pasando:

[tynaut (Ty Correll)]

@putty

Intenté modificar el CSS para ajustar este elemento, pero no pude resolverlo. Si oculto el ::before, aparece un ::after. Cuando oculto ambos, el espaciado persiste.

El espaciado debería ser para la línea de tiempo del tema (imagen de arriba como referencia), por eso sin los clearfix el espacio sigue presente. Todavía hay espacio para la línea de tiempo, incluso si solo hay una publicación y aunque no seas administrador, donde la línea de tiempo aparecería vacía y se ve como un espacio vacío.

Puede ser inconsistente o discordante si este espacio se llena cuando se agrega una nueva publicación y aparece la línea de tiempo del tema, pero si quieres que ocupe todo el espacio cuando hay solo una publicación (sin línea de tiempo), podrías hacer esto:

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

Nota: El .timeline-scrollarea-wrapper solo aparece si hay suficientes publicaciones para que aparezca la línea de tiempo, por eso esto funciona.

Para administradores (ver el botón flotante):

Para no administradores:

Si quieres un poco de espacio para el botón de configuración, puedes ajustar o modificar esta parte:

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

¿Esto ayuda a entender lo que sucede con el diseño o a resolver completamente el problema? Vemos que el clearfix en tu captura de pantalla ocupa un espaciado ligeramente diferente al que pudimos replicar, por lo que no estamos 100% seguros de si esto aborda el problema.

Personalmente, lo dejaría como está para mantener la consistencia con la línea de tiempo disponible o no disponible, pero si quieres hacerle cambios, el CSS anterior debería ser suficiente para ocupar todo el ancho cuando la línea de tiempo del tema está vacía. ¡Avísanos si tienes algún problema con esto o necesitas ayuda con la implementación! Gracias.