Message with both icon and compact props does not become compact

[hanshenrik]

Steps

1. Go to https://react.semantic-ui.com/collections/message#message-example-icon-prop
2. Give the Icon Message example a compact prop

Expected Result

The Message should become compact, like non-icon Message components

Actual Result

The Message stays fluid.

Version

0.75.1

Testcase

https://react.semantic-ui.com/collections/message#message-example-icon-prop
Add a compact prop and remove/add the icon prop to see how this affects the compact styling

[brianespinosa]

Hi @hanshenrik, thanks for the report. Checking the markup that is generated, all of the correct class names are present for that combination of props ui compact icon message. This is actually an issue in the CSS, specifically because the icon message type is switching to display: flex in order to achieve that layout. You will see the same thing if you modify the markup in SUI core docs here: https://semantic-ui.com/collections/message.html#icon-message

I'd encourage you to open a CSS issue on the SUI core repository for this: https://github.com/Semantic-Org/Semantic-UI/issues

[hanshenrik]

Thanks for the quick response.

The issue is addressed here: Semantic-Org/Semantic-UI#4759