「このトピック内を検索」のレスポンシブレイアウト問題と「Ubuntu」ベースフォント

[rahim123]

こんにちは。サイトで特定のズームレベルのFirefoxで奇妙なレンダリングの問題が発生しています。「このトピックで検索」のテキストが2行に折り返されてしまいます。これは、システムの基本フォントが「Ubuntu」に設定され、ズームレベルが100%または110%の場合にのみ発生するようです。また、Discourseのプロフィールのインターフェイスフォントサイズの設定は「Larger」になっています。Sam’s Simple Themeでも、デフォルトのDiscourse light themeでも同様の動作が見られ、すべてのテーマコンポーネントを無効にしてみましたが、基本フォントスタイル以外のカスタマイズに関連しているわけではないようです。

Sam’s Simple ThemeとデフォルトのArialフォントを使用したDiscourse Meta、バグなし（私のサイトでもArial基本フォントで同様です）

Sam’s Simple Themeと「Ubuntu」基本フォントを使用した私のフォーラム

100%ズーム、バグあり：

110%ズーム、バグあり：

120%ズーム、バグなし：

90%ズーム、バグなし：

[awesomerobot (Kris)]

これを UX として再分類しました。機能はしていますが、レイアウトが崩れています。ご報告ありがとうございます！これは簡単な修正で、CSSでテキストの折り返しを防ぐ必要があります。

[rahim123]

クリスさん、本当にありがとうございます！「UX」が要素の追加/削除/移動に関係ない場合でも「UX」になるのかどうか、確信が持てませんでした。CSSの修正を楽しみにしています。私も自分のテーマのカスタマイズで、いくつかの場所でテキストの折り返し問題に遭遇していますが、それは私のせいなので。

[awesomerobot (Kris)]

これで修正できるはずです。

UX: prevent search context btn text from wrapping

ボタンのCSSに white-space: nowrap を適用するだけです。

[rahim123]

クリスさん、本当にありがとう！その修正をカスタムテーマコンポーネントに追加したら、ずっと良くなりました。新しい不具合として、スクロールバーが100%ズームでしか表示されず、約5pxの水平移動が可能になります。