feat(Alert): Create opt-in for content max-width

• Integration MR: gitlab!53107 (closed)

What does this MR do?

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.

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • CustomersDot: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.

Security

N/A

Closes #1144 (closed)