docs(alert): Alerts examples responsiveness issues

[nikolovlazar]

Some of the examples in the Alert page have issues with responsiveness:

Possibly related to #496

[TylerAPfledderer]

Hey @nikolovlazar! Since that was my doing, you can assign it to me. I was looking to still survey some of these examples across the docsite to see if they should be updated because of the overflow fix.

[TylerAPfledderer]

@noobinthisgame / @nikolovlazar So the whiteSpace: pre I applied to LiveCodePreview is the primary culprit here. I could remove it entirely..

At 375px mobile width, the first Alert example will now render like this:

However, in the Form Control Sample Radio Group the last radio will now look like this:

Where should the importance be placed here? This looks to be a conflict of the base styles in how they are handled here in the preview container. Would the Alert examples take priority because there is a higher visual impact in the issue and that the Alert component has a base style of overflow: hidden?

[jacobhq]

I think that this is a larger issue, as in the transition pages I am seeing this also. Have any changes been made to the editable example system recently?

[TylerAPfledderer]

@jacobhq this is a part of #496, because there were other examples overflowing the preview container, so overflow:auto was applied to contain the previews.

Removing whiteSpace: pre will also fix the example you provided, because that prop was added with the overflow in hopes that it would simply maintain the original space in the desktop view. Unfortunately these side effects were overlooked.

[TylerAPfledderer]

However, if whiteSpace is removed there are still some examples that might need to be addressed because of the overflow applied, such as some text content being compressed. (that was my primary reason for adding whiteSpace)