شرح صفوف ومحتوى الفقرة
يتحول الانكماش التلقائي إلى خلل بصري واضح عندما تجاور فقرة إشعار طويلة صورة رمزية دائرية بعرض 48px أو شارة أيقونة أو زر إجراء؛ إذ يضغط النص الطويل على الأيقونة فيحول الدائرة إلى شكل بيضاوي مشوه. يحل التصريح الحاسم flex-shrink: 0 هذه المشكلة فوراً بتثبيت بُعد الأيقونة أو الزر وإجبار كتلة النص وحدها على الانكماش والالتفاف.
CSS
.alert-row {
display: flex;
gap: 12px;
}
.icon-badge {
width: 48px;
height: 48px;
flex-shrink: 0;
}