Make all notice-list notices the same min-height

[kjellr]

Follow up from #16861.

This PR is an attempt to make sure that the height of all single-line notices in the notice list are the same, regardless of whether or not they have an action button. The main reason for fixing this is so that the x button will appear properly visually centered in both (check the first Before screenshot below to see an example).

Normally, the inline button pushes up the line height quite a bit, so in order to get these to match up, we need to compensate for that somehow.

If notices were always on one line, we'd just add some extra line height to match, and we'd be all set. But we don't want to add too much line height, because when things wrap onto a second line, it'll look weird. This PR is a little tacky, but it seeks out a middle ground: taller (but still acceptable) line height, and very slightly shorter button + button margins.

This approach feels a little hacky to me, so I think we should also consider other solutions. Flexbox may be a more robust solution, so I'll keep trying that out too.

---

Screenshots

Before:

After:

Testing

Pasting this into your console should produce two test messages:

wp.data.dispatch('core/notices').createNotice(
	'warning',
	'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
	{
		isDismissible: true,
		actions: [
			{
				onClick: () => console.log( 'test' ),
				label: 'View post'
			}
		]
	}
);
wp.data.dispatch('core/notices').createNotice(
	'success',
	'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
	{
		isDismissible: true,
	}
);

[senadir]

while the solutions seems to work, I strongly think we should do a flex based solution, I might give it a try Sunday

[karmatosed]

I would be +1 for a flexbox option here, how did your experiment go @senadir ? For now, removing design feedback as so long as it actually levels the min-height there is no design impact.

[kjellr]

Yes, please do try out a flexbox solution! I gave flexbox a brief try last week, but ran into some issues around the inline action buttons, and knowing when to wrap them. It could use another focused effort.

[kjellr]

I've pushed a few commits that swap out the approach to use flexbox instead. It appears to work pretty well, but still needs some thorough testing.

[kjellr]

Alright, I've tried this flexbox solution out in Safari, Chrome, and FF on the Mac, as well as IE11 on Windows 7. It seems relatively solid.

Would someone mind giving this a test + review?

[senadir]

I've tested this with all possible content variations and it seems to work fine, the code is not directly straightforward to understand but there's no hacks to be documented so I guess it's fine with type of complex layouts

[kjellr]

Thanks @senadir — I've updated to include some code comments to help clarify what's happening.

[senadir]

tests seems to fail randomly, I've restarted them