Alert > Create opt-in for content max-width

Purpose

The content within an alert expands horizontally in proportion to the alert width, which is based on its parent container. This means that in many cases alert content can be too wide, causing the text to be difficult to read, and the actions within to be far from each other.

Proposal

The proposal is to apply max-width styles to the alert contents. The width will be set with the $limited-layout-width variable, that also corresponds to the product. In this way the content width should match the product when the fixed width setting is selected by the user. In cases where fluid is used, the benefit still remains for content to be readable and not have any controls fall into the user’s peripheral.

Before	After

The alert currently has no content container in the markup, so one will have to be added. It can be added to GlAlert immediately, but for HAML and Ruby templates the markup will have to be updated. For that reason the max-width styles and markup changes will be opt-in to support a better migration path for non-Vue implementation.

There was an initial attempt at this (!1910 (merged)), but it didn’t account for HAML and Ruby, so it was reverted. Another exploration sought to use dynamic padding to avoid markup changes (!1929 (comment 482870608)), but because alerts can be present in other components that use different positioning, it would’ve required extensive smoke testing and workarounds.

Scope

This would apply to all alert variants.