Resolve "Fix images overflow at releases list panel"
What does this MR do?
Resolves #212063 (closed), #208148 (closed)
This MR fixes the overflow of images added to the body (notes) of a Release item in the releases overview list.
By adding the md modifier class to the release.descriptionHtml container, when an image is added to the release notes, the <img> tag inherits the max-width:100% property, solving the problem of overflowing images that were previously breaking the layout.
Additionally, this change solves the problem of inconsistent markdown styles for typographic elements. Semantically speaking, the headings inside the release notes (card body) should not have the same font size as the outer headings. This is what we call compact markdown styles in Pajamas. See the Figma UI Kit for examples.
For reference, when I add some markdown elements to the description of the MR the text won't render with the same font size as the title of the MR, which is computed at 28px on large viewports. See below in action:
h1 example (computed: 24.5px)
h2 example (computed: 21px)
h3 example (computed: 18.2px)
Screenshots
| Before | After |
|---|---|
 |
 |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Closes #212063 (closed), #208148 (closed)