返信ボタンのサイズはテキストサイズの設定に影響されます

New topic controls on Meta での議論を続けます。

すべてのボタンのフォントサイズを同じにする

の一部は、すべての場合に機能しないと思います。

設定で小さいテキストサイズを選択しましたが、それが返信ボタンのサイズに影響しているようです。他のボタンよりも小さいです。興味深いことに、大きいフォントサイズを選択しても大きくなりません。

「いいね!」 6

サイズは通常ですが、この問題も発生しています。

「いいね!」 1

@Moin様、ご報告ありがとうございます。デザイナーは問題を認識していますが、まだ修正策は見つかっていません。解決策について何かアイデアはありますでしょうか?

これはモバイルのトピックの最下部にありますか?
おそらく、デスクトップ/タブレットの「返信」のテキストサイズの影響を受けている可能性がありますが、モバイルでは表示されません。

返信ボタンのサイズは適切だと思いますが、左側のボタンはそうではありません。

.topic-footer-main-buttons エリアの他のボタンとは異なり、トピック通知ボタンは div (.topic-notifications-button) で囲まれています。

返信ボタンを含むエリアのすべてのボタン(簡略化されたコード):

<button></button>

通知ボタン(簡略化されたコード):

<div class="topic-notifications-button">
  <button></button>
</div>

問題は、この行のせいです。

font-size: var(--font-up-1) プロパティが、通知ボタンのラッパー その中のボタンの両方に適用されます。
ご存知の通り、em 値は親から子へと段階的に乗算されます。

結果は次のように例示できます。

<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

1.15 × 1.15 が問題です。通知ボタン <button> 要素の font-size の最終値が予想よりも大きくなります。

これは一見すると明らかではありません。なぜなら、兄弟ボタン(レンチ、共有、ブックマークなど)は、同じ の最も高い要素に合わせて高さを調整するため[^1]、トピック通知ボタンは「高すぎる」とは目立たないからです。このコンテナ内のすべてのボタンは同じ高さになります。

[^1] これは、コンテナにいくつかの追加ボタンを追加してコンテンツを折り返せるようにすると、例示できます。



最初の行のボタンはすべて期待どおりの高さになります。

しかし、em の乗算により予想よりも大きくなった通知ボタンは、同じ行の隣接するボタンの高さを自動的に増加させます。

GitHub のワンボックスのハイライトされた行を削除すると、問題が解決するはずです。

「いいね!」 7

デバッグしていただきありがとうございます。デザイナーに引き継ぎます :hugs:

「いいね!」 3

通知ボタンが問題の原因であることはわかっていましたが、まだ特定できていませんでした。すごい発見ですね!そこに二重のemが適用されていることを見落としていました!まだ確認していませんが、可能性は非常に高いです。

ありがとうございます! :clap:

「いいね!」 6

これは修正されるべきです (PR)

「いいね!」 2

Share your feedback about the 🆕 iOS Discourse Hub app のようなピン留めされたトピックでは、返信ボタンは依然として小さいです。

「いいね!」 2

:pushpin: セレクトキットのSVGアイコンの隣にある不可視テキスト \u0026ZeroWidthSpace; は、ボタンの高さを増加させます。同様に、どのボタン内のテキストもその高さを増加させます(そして、上記で議論された動作のように、兄弟ボタンもそれに応じて高さを調整します)。

はい、それは私が内部トピックとして提起するものです。&ZeroWidthSpace; が問題を引き起こしているのが私の変更によるものなのか、それとも常にそうだったのに今回このセットアップで気づいたのかは分かりません。

「いいね!」 1

このトピックは2日後に自動的に閉じられました。返信はもう受け付けられません。