全幅テーマと #reply-control の幅100%に関する不具合

こんにちは。Discourse のデフォルトの左右の余白が広すぎるとユーザーから不満が出ています。そのため、https://github.com/programmersforum-reborn/discourse-wide-posts と以下の追加 CSS を使用していました。

:root {
    --d-max-width: 1900px;
    --topic-body-width: 1244px;
}

最近の Discourse のアップデートで https://github.com/programmersforum-reborn/discourse-wide-posts が壊れたようで、全幅のコンポーザーパネルが画面の左端からはみ出してしまいました。そのため、discourse-wide-posts を無効にして https://github.com/discourse/discourse-full-width-component をインストールしました。これは左側の余白を縮小するだけで、さらに右側の余白を縮小し、コンポーザーペインを全幅にするための CSS を追加しました。

body.has-sidebar-page #reply-control.show-preview:not(.fullscreen), #reply-control {
    max-width: 100%;
    margin-left: 0;
}
:root {
    --d-max-width: 1900px;
    --topic-body-width: 1244px;
}

しかし、いくつかの奇妙な点があります。これらのほとんどは、Discourse Meta の Default (full-width) または https://meta.discourse.org/t/fully-a-full-width-discourse-theme/262833 テーマで再現できます。

まず、前述の #reply-control に対する CSS を適用しないと、ペインがズームレベルによってジャンプします。





また、通常のズームレベルでは sidebar-wrapper div は下のコンポーザーペインの高さに合わせて高さを調整しますが、ブラウザウィンドウの幅がある程度を超えると何かが変わり、サイドバーの下部までスクロールする方法がないまま切り取られてしまいます(おおよそどのくらいの幅で発生するかはスクリーンショットの画像幅を参照してください)。




最後に、--topic-body-width: 1244px; ルールを使用すると、トピックを表示しているときに、長いスレッドで新しい投稿チャンクを読み込むのにかかる時間中にサイドバーの項目が上に移動し、投稿タイムラインスライダーで異なる位置にジャンプしてから、読み込みが完了すると通常の場所に復帰します。これは非常に気が散り、カスタム幅の設定をやり直す必要があったこのアップデート以降発生するようになったようです。CSS ルールを --topic-body-width: 100%; に変更すると、タイムラインのシフト中にサイドバーの項目は所定の位置にとどまりますが、ローディングインジケーターが表示されている間、タイムラインは左に(おそらく Discourse の標準の --topic-body-width に?)シフトしてから、右側の余白の近くの通常の場所に戻ってジャークします。これに対する回避策はありますか?おそらく、回転するローダーに適用できる幅のルールがありますか?あまりにも短いため、HTML インスペクターでキャッチできません。

これをデバッグするために、さらに情報が必要な場合はお知らせください。ありがとうございます!

「いいね!」 1