Ampio spazio tra chat e contenitore dell'argomento

[putty (Derek Putnam)]

Quando attiviamo la chat livestream per i nostri eventi, questo ampio spazio appare in div.container.post::before. Lo spazio è corretto finché non attivo la trasformazione con il tag.

Ho provato a modificare il CSS per regolare questo elemento, ma non sono riuscito a capirlo. Se nascondo il ::before, appare un ::after. Quando nascondo entrambi, lo spazio persiste.

Ecco la pagina se qualcuno vuole vederla dal vivo.

Questo spazio non appare nello screenshot ufficiale, quindi non sono sicuro di cosa stia succedendo:

[tynaut (Ty Correll)]

@putty

Ho provato a modificare il CSS per regolare questo elemento, ma non sono riuscito a capirlo. Se nascondo il ::before, appare un ::after. Quando nascondo entrambi, lo spazio persiste.

Lo spazio dovrebbe essere per la timeline dell’argomento (immagine sopra per riferimento), motivo per cui senza i clearfix lo spazio è ancora presente. C’è ancora spazio per la timeline, anche se c’è solo un post e anche se non sei amministratore, dove la timeline apparirebbe vuota e appare come spazio vuoto.

Potrebbe essere incoerente o stridente se questo spazio si riempisse quando viene aggiunto un nuovo post e appare la timeline dell’argomento, ma se vuoi che occupi tutto lo spazio quando c’è un solo post (nessuna timeline), potresti fare così:

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

Nota: Il .timeline-scrollarea-wrapper appare solo se ci sono abbastanza post perché la timeline appaia, motivo per cui questo funziona.

Per gli amministratori (vedi il pulsante mobile):

Per i non amministratori:

Se desideri un po’ di spazio per il pulsante delle impostazioni, puoi regolare o modificare questa parte:

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

Questo aiuta a capire cosa sta succedendo con il layout o assiste completamente? Vediamo che il clearfix nella tua schermata occupa uno spazio leggermente diverso da quello che siamo stati in grado di replicare, quindi non siamo sicuri al 100% se questo risolva il problema.

Personalmente lo lascerei così com’è per coerenza con la disponibilità o meno della timeline, ma se vuoi apportare modifiche, il CSS sopra dovrebbe essere sufficiente per occupare l’intera larghezza quando la timeline dell’argomento è vuota. Fateci sapere se avete problemi con questo o avete bisogno di aiuto con l’implementazione! Grazie.