Großer Abstand zwischen Chat und Themencontainer

[putty (Derek Putnam)]

Wenn wir den #livestream-Chat für unsere Veranstaltungen auslösen, erscheint diese große Lücke im
div.container.post::before. Der Abstand ist in Ordnung, bis ich die Transformation mit dem Tag auslöse.

Ich habe versucht, mit CSS an diesem Element herumzuspielen, konnte es aber nicht herausfinden. Wenn ich ::before ausblende, erscheint ein ::after. Wenn ich beides ausblende, bleibt der Abstand bestehen.

Hier ist die Seite, falls jemand sie live sehen möchte.

Dieser Abstand erscheint nicht im offiziellen Screenshot, daher bin ich mir nicht sicher, was vor sich geht:

[tynaut (Ty Correll)]

@putty

Ich habe versucht, mit CSS an diesem Element herumzuspielen, konnte es aber nicht herausfinden. Wenn ich ::before ausblende, erscheint ein ::after. Wenn ich beides ausblende, bleibt der Abstand bestehen.

Der Abstand sollte für die Topic-Timeline sein (Bild oben als Referenz), weshalb der Abstand auch ohne die Clearfixes vorhanden ist. Es gibt immer noch Platz für die Timeline, auch wenn es nur einen Beitrag gibt und auch wenn Sie kein Administrator sind, wo die Timeline leer erscheinen würde und als leerer Raum dargestellt wird.

Es kann inkonsistent oder störend sein, wenn dieser Platz gefüllt wird, wenn ein neuer Beitrag hinzugefügt wird und die Topic-Timeline erscheint, aber wenn Sie möchten, dass er den gesamten Platz einnimmt, wenn es nur einen Beitrag gibt (keine Timeline), könnten Sie Folgendes tun:

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

Hinweis: Der .timeline-scrollarea-wrapper erscheint nur, wenn genügend Beiträge vorhanden sind, damit die Timeline angezeigt wird, weshalb dies funktioniert.

Für Administratoren (siehe schwebenden Button):

Für Nicht-Administratoren:

Wenn Sie etwas Platz für den Einstellungsbutton wünschen, können Sie diesen Teil anpassen oder verändern:

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

Hilft dies zu verstehen, was mit dem Layout los ist, oder hilft es vollständig? Wir sehen, dass der Clearfix in Ihrem Screenshot einen etwas anderen Abstand einnimmt, als wir ihn replizieren konnten, daher sind wir uns nicht zu 100 % sicher, ob dies das Problem behebt.

Ich persönlich würde es so belassen, wie es ist, um die Konsistenz zu wahren, wenn die Timeline verfügbar oder nicht verfügbar ist, aber wenn Sie Änderungen daran vornehmen möchten, sollte das obige CSS ausreichen, um die volle Breite einzunehmen, wenn die Topic-Timeline leer ist. Lassen Sie uns wissen, wenn Sie Probleme damit haben oder Hilfe bei der Implementierung benötigen! Danke.