# Large gap between chat and topic container

**URL:** https://meta.discourse.org/t/large-gap-between-chat-and-topic-container/382837
**Category:** Bug
**Tags:** discourse-livestream
**Created:** [September 16, 2025, 2:39pm UTC](https://meta.discourse.org/t/large-gap-between-chat-and-topic-container/382837 "2025-09-16T14:39:43Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![putty](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/putty/32/370902_2.png) [@putty](https://meta.discourse.org/u/putty)
#### Post date: [September 16, 2025, 2:39pm UTC](https://meta.discourse.org/t/large-gap-between-chat-and-topic-container/382837/1 "2025-09-16T14:39:43Z")

</div>

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.

 ![CleanShot 2025-09-16 at 10.11.04](https://global.discourse-cdn.com/meta/original/4X/5/4/1/541e1ccf67d35557053c6075963e08aec90facd4.png)

[Here is the page if someone wants to see it live.](https://community.netwrix.com/t/ama-with-vincent-le-toux-creator-of-pingcastle/110922)

This spacing does not appear in the offical screenshot, so I’m not sure what’s going on:

 ![CleanShot 2025-09-16 at 10.38.20](https://global.discourse-cdn.com/meta/original/4X/b/c/8/bc847aaece8169b3ba5054727d85b20d5b826d54.jpeg)

---

<div class="post-metadata">

### Author: ![tynaut](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tynaut/32/276689_2.png) [@tynaut](https://meta.discourse.org/u/tynaut)
#### Post date: [September 17, 2025, 9:54pm UTC](https://meta.discourse.org/t/large-gap-between-chat-and-topic-container/382837/8 "2025-09-17T21:54:54Z")

</div>

> [@putty](#):
>
> 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.

 ![CleanShot 2025-09-17 at 16.51.54@2x](https://global.discourse-cdn.com/meta/original/4X/1/e/e/1ee6c9a4609867c83f7443ed3e38e52c019eda36.png)

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:

```plaintext
@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):

 ![CleanShot 2025-09-17 at 16.48.35@2x](https://global.discourse-cdn.com/meta/original/4X/6/e/e/6ee07fa2070b04285fedacbc3694e1057b429cfd.png)

For Non-Admins:

 ![CleanShot 2025-09-17 at 16.49.09@2x](https://global.discourse-cdn.com/meta/original/4X/a/5/6/a562cf5f0c680fcc64688caa3ddc5abbc9875cc6.jpeg)

If you want a little space for the settings button, you can adjust or tweak this part:

```plaintext
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.