أعتقد أن زر الرد بالحجم المناسب والأزرار الموجودة على اليسار ليست كذلك.
بخلاف الأزرار الأخرى في منطقة .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 هي المشكلة. القيمة النهائية لـ font-size على عنصر زر الإشعارات <button> أكبر من المتوقع.
ليس من الواضح للوهلة الأولى لأن الأزرار الشقيقة (المفتاح، المشاركة، الإشارة المرجعية، إلخ) تعدل ارتفاعها لتناسب أطول عنصر في نفس السطر [1]، لذلك لا يبرز زر إشعارات الموضوع على أنه “طويل جدًا”، نظرًا لأن جميع الأزرار في هذا الحاوية لها نفس الارتفاع.
إزالة السطر المميز في onebox الخاص بـ GitHub أعلاه يجب أن يحل المشكلة:
يمكن توضيح ذلك إذا أضفنا بضعة أزرار إضافية في الحاوية لجعل المحتوى يلتف:
تحصل الأزرار في السطر الأول كلها على الارتفاع المتوقع.
ومع ذلك، فإن زر الإشعارات، الأكبر من المتوقع بسبب مضاعفةem، يجعل الزر المجاور في نفس السطر يزيد تلقائيًا في الارتفاع. ↩︎
