Icon shrinks with long content

[andij]

Describe the bug

The icon alongside the details and validation will shrink when there's longer content than the width of the viewport.

• details
• inputter-details
• inputter-validation

To Reproduce

Steps to reproduce the behavior:

1. Visit Storybook
2. Go to the muon-detail and muon-inputter component
3. Make the viewport narrow
4. Increase the length of the content in the heading and message
5. Observe the icons get smaller

Expected behavior

The icons should retain their defined size

Screenshots

Desktop (please complete the following information):

• OS: All
• Browser: All
• Version: All

Smartphone (please complete the following information):

• Device: All
• OS: All
• Browser: All
• Version: All

Additional context

Setting flex-shrink: 0; on the <detail-icon> will help.

It will be necessary to pay attention to the vertical alignment, as it's currently inconsistent. This may require a separate ticket.

[andij]

• PR fix: stop icon from shrinking #200

NOTE: Applying align-self: baseline; fixes the inconsistency with the vertical alignment of the icon. However, it is a fragile solution as it relies on the height of the icon being the same height as the line-height.

[jholt1]

Okay let's go with baseline and see what happens with further usage