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

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

.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