background

recently, i revised MediaWiki:Editpage-head-copy-warn (basically an editnotice that warns the editors that copyrighted material shouldn't be added to wikimedia sites) on azwiki to make it codex-based (see fig. 1 vs. fig. 2)

but as you can see in the photo, the ℹ icon in the new version has almost half the width it should have. that's because the text is too long and the <div> that contains the overflowing text kind of "squeezes" the icon. this issue doesn't happen if we use the vue-based component (see fig. 3) as the class cdx-icon--medium appended to the icon's container will set a min-width: 18px;. the css-only version, however, is going to have a styling that goes like this: .cdx-message .cdx-message__icon { min-width: 10px; } and it causes this annoying situation.

what to do to reproduce

insert a css-only message component anywhere that has a long ass text; take this code as an example:

<div class="cdx-message cdx-message--block cdx-message--notice" aria-live="polite"><!--

--><span class="cdx-message__icon"></span><!--
--><div class="cdx-message__content">Müəlliflik hüquqları ilə qorunan material əlavə edilməməlidir. Məzmun [[Vikipediya:Ensiklopedik əhəmiyyətlilik|ensiklopedik olmalıdır]] və [[Vikipediya:Etibarlı mənbələr|etibarlı mənbələrlə]] [[Vikipediya:Yoxlanıla bilmə|təsdiqlənə bilməlidir]]. Vikipediyadakı materiallar lisenziyanın şərtlərinə uyğun olduqda hər kəs tərəfindən redaktə edilə, istifadə oluna və paylaşıla bilər.</div><!--

--></div>

what could be done

the aforementioned 10px could be replaced with an 18px, which perfectly solves the issue (see fig. 4)

referenced figures

figure 1	figure 2	figure 3	figure 4