チャットとトピックコンテナの間の大きなギャップ

イベントの livestream チャットをトリガーすると、div.container.post::before に大きなギャップが表示されます。タグで変換をトリガーするまでは、スペーシングは問題ありません。

CSS をいじってこの要素を調整しようとしましたが、うまくいきませんでした。::before を非表示にすると、::after が表示されます。両方を非表示にすると、スペーシングは残ります。

ライブで確認したい場合は、こちらのページをご覧ください。

このスペーシングは公式のスクリーンショットには表示されていないため、何が起こっているのかわかりません。

このスペーシングはトピックタイムライン(参考画像)のためのものなので、clear fixesなしではスペースが残ったままになります。タイムラインのためだけのスペースが残っており、投稿が1つだけで、管理者でなくてもタイムラインが表示されず、空のスペースとして表示される場合でも同様です。

新しい投稿が追加されてトピックタイムラインが表示されるときにこのスペースが埋まるのは一貫性がなかったり、不自然だったりするかもしれませんが、投稿が1つだけ(タイムラインなし)の場合に全幅を占めるようにしたい場合は、次のようにできます。

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

注:.timeline-scrollarea-wrapper は、タイムラインが表示されるのに十分な投稿がある場合にのみ表示されるため、これは機能します。

管理者の場合(フローティングボタンを参照):

非管理者の場合:

設定ボタンのために少しスペースを確保したい場合は、この部分を調整または変更できます。

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

これにより、レイアウトで何が起こっているのか理解できたり、完全に役立ったりしますか?スクリーンショットのclearfixは、再現できたものとはわずかに異なるスペーシングを占めているため、これが問題に対処しているかどうかは100%確信が持てません。

個人的には、タイムラインが利用可能か利用不可能かの一貫性のためにそのままにしておきますが、変更したい場合は、上記のCSSでトピックタイムラインが空の場合に全幅を占めるのに十分なはずです。これに関して問題がある場合や、実装のヘルプが必要な場合はお知らせください!ありがとうございます。

「いいね!」 3