チャットを有効にすると、モバイルの main-outlet のパディングが変更されます

チャットを有効にすると、モバイルで main-outlet のパディングが次のように変更されます。

関連するチャット CSS はこちらです。


(パディングが 1em から 0 に上書きされています)

まだ開発中であり、変更される可能性があることは理解しています。チャットページでパディングをゼロに設定するのは理にかなっていると思いますが、すべてのページに適用されてしまいます。


もう一つ気づいた点は、モバイルでキーボードが入力内容を覆ってしまうことです(Android/Chrome)。

キーボードの上にテキストボックスが配置されている Discord と比較してください

これは見落とされたというよりは、バグのように思えます。もし私の環境固有のバグであれば、テーマコンポーネントや原因となっているものについてさらに調査することができます。

AndroidのバージョンとChromeのバージョンを教えていただけますか?

これは本当にチャットから来ているのですか? AFAIK、chat-mobile.scss ファイルはありません。

まず、チャットが正しくインストールされているか確認させてください。
昨夜、インスタンスを再構築しました。アプリのymlファイルにチャットを含めませんでした。これは、ディスコースコアに含まれるプラグインになったという理解で合っていますか?


URLはこちらにリンクしています: discourse/plugins/chat at main · discourse/discourse · GitHub

このchat-mobile.scssがどこから来ているのか見つけます。

はい、これはコアプラグインになりました

何か見落としているかもしれませんが…、すぐに思いつく限りでは、これが現在プラグインのどこにあるのか分かりません。パディングに関するものはありますが、これは .has-full-page-chat にスコープされるはずであり、その結果、他のページには影響しないはずです。

「いいね!」 1

見つけました。使用している Discourse Air テーマからのようです。

これに独自のCSSで上書きしているので、今回は私の問題だと思います。


キーボードの問題を調べます。この動作は意図したものではないと仮定してよろしいでしょうか?

「いいね!」 1

はい、意図的ではありません :slight_smile:

問題を特定しました。below-site-header アウトレットを使用しているコンポーネントがいくつかあります(例:ローテーションバナーとナビバー)。それらの高さが正しく考慮されていないのではないでしょうか?

フルスクリーンショット

これらは私が書いたカスタムコンポーネントなので、また「私」の問題かもしれませんが、「below-site-header」内のものはすべて問題になる可能性があり、その場合は「私たち」の問題になります :slight_smile:

「いいね!」 1

それはどのように機能しますか?チャットを表示するために50pxの高さが残ります。

チャットのテキストボックスに触れると、画面がページの最上部にジャンプし、below-site-header のコンテンツが表示されることが、主な問題だと思います。

ビデオ例

代わりに、チャット div の下部がキーボードのすぐ上にくる位置にページがジャンプする方が理にかなっていると思います。または、テキストボックス div をページの下部(キーボードの上部)に固定して、常に表示され、すべてをオーバーレイするようにします。

理想的な解決策が何であれ、たとえ 50px のスペースしかなくても、テキストボックスは画面に表示されるものの中で最優先されるべきです。