When we trigger the livestream chat for our events, this large gap appears in the
div.container.post::before. Spacing is fine until I trigger the transformation with the tag.
I tried tinkering with CSS to adjust this element, but couldn’t figure it out. If I hide the ::before, an ::after appears. When I hide both, the spacing persists.
Here is the page if someone wants to see it live.
This spacing does not appear in the offical screenshot, so I’m not sure what’s going on:
The spacing should be for the topic timeline (image above for reference), which is why without the clearfixes the space is still present. There is still space for the timeline, even if there is only one post and even if you are not admin, where the timeline would appear empty and appears as empty space.
It may be inconsistent or jarring if this space filled when a new post is added and the topic timeline appears, but if you want it to take up the full space when it is only one post (no timeline), you could do this:
@media screen and (min-width: 925px) {
.container.posts:not(:has(.timeline-scrollarea-wrapper)) {
grid-template-columns: 100%;
}
}
Note: The .timeline-scrollarea-wrapper only appears if there is enough posts for the timeline to appear, which is why this works.
For Admins (see the floating button):
For Non-Admins:
If you want a little space for the settings button, you can adjust or tweak this part:
grid-template-columns: 90% 10%;
grid-template-columns: calc(100% - 80px) 80px;
Does this help understand what is going on with the layout or assist fully? We see that the clearfix in your screenshot takes up a slightly different spacing than we were able to replicate, so we aren’t 100% certain if this addresses the issue.
I would personally leave it as-is for consistency with the timeline being available or not available, but if you want to make changes to it, the css above should be sufficient for taking up the full width when the topic timeline is empty. Let us know if you have any issues with this or need help with implementation! Thanks.