Foundation.mozilla.org: Image text mini layout bug

[kristinashu]

Describe the bug

• Icon and layout in image text mini component changes depending on copy on right side.

To Reproduce

• I've made this test page to show the three different possible text variations https://foundation.mofostaging.net/en/initiatives/image-text-mini-test/.
• Component looks good in version 1 when text wraps but icon looks stretched (and ratio of icon to text is different) if text doesn't warp (is only on one line or has returns to break lines).

Expected behavior

• Icon and layout should look the same regardless of how much text there is and how text is formatted.

Screenshots

This is happening on prod here https://foundation.mozilla.org/en/fellowships/apply/ (correct) vs https://foundation.mozilla.org/en/fellowships/partner-with-us/ (icon is too large).

cc @youriwims @mmmavis

[mmmavis]

@kristinashu how big should the image section be? e.g., as wide as the original image dimension? certain % of the width of the "image text mini" component? fixed width?

[kristinashu]

The image should be fixed at 50x50px (image should crop if something larger or non-square is uploaded).

[mmmavis]

@kristinashu does the 50*50px dimension apply to image on all screen sizes?

[kristinashu]

Yes please. The way it's mocked up kinda breaks the grid but I've added a light gray bounding box to help convey with the idea.

[mmmavis]

@kristinashu thank you! That screencap is very helpful!