Fix prevent long words from breaking layout
-
Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you receive complimentary access to GitLab Duo.
What does this MR do and why?
This change improves the layout of alert boxes in the GitLab documentation theme. The update adds a CSS rule that prevents content inside alerts from overflowing or breaking the layout when there's very long text or wide content. It also applies a specific CSS class to the content area of alerts to ensure consistent styling and proper text wrapping behavior.
Benefit: Ensures long words or wide content display correctly in alerts, improving readability and preventing layout issues.
This fix is especially important for the mobile version, where overflowing content previously caused alerts to break the layout or extend outside the screen.
Screenshots, screen recordings, or links to review app
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Configure a local GitLab Docs environment.
- Check out this branch.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.