Styling issues with Box style Text on Media paragraphs

[bberndt-uaz]

Problem/Motivation

In certain circumstances, Text on Media paragraphs set to the Box style can be displayed without the correct styling. In particular, the "Space Around Content" margins can be incorrectly applied above and below the media instead of above and below the content container, resulting in the height of the paragraph being too small.

Describe the bug

In order for a Box style Text on Media paragraph to be styled correctly, the following CSS is required to be loaded with the page and applied to the element: https://github.com/az-digital/az_quickstart/blob/main/modules/custom/az_paragraphs/css/az_paragraphs_full_width.css#L29-L36.

.region-content .az-full-width-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

There are two instances where this CSS is not correctly applied.

1. The Text on Media paragraph is not full-width and no other full-width Text on Media or Text with Background paragraphs are included on the page, so the CSS library with this styling is never loaded with the page:

2. The Text on Media paragraph is present in another region besides "Content" (in a flexible block, for example) and therefore does not receive the styling due to the .region-content selector:

To Reproduce

Steps to reproduce the behavior:

1. Create a page with a Text on Media paragraph as the only page element. Use the following settings:
   • Do NOT check the "Full width" checkbox
   • Set the Content style to Box style
   • Set the Space Around Content setting to a large value such as 8 rem
2. Save the page and observe that the height of the paragraph is incorrect.
3. Create a new flexible block with a Text on Media paragraph using the Box style.
4. In Block Layout, add the block to a region other than "Content" (such as Content Top or Full width content bottom).
5. Visit a page where the block is present and again observe that the height of the paragraph is incorrect.

Proposed resolution

1. First, update the view display for Text on Media paragraphs to force display: flex along with the .az-full-width-row element. This will fix the height in both cases above.
2. Second, update the az_paragraphs_full_width CSS library to allow the full-width paragraph styling to apply to any region, not just the Content region. This will fix a remaining issue with horizontal margins.

Expected behavior

Box style Text on Media paragraphs should have consistent styling regardless of whether they are full-width or not and whether they are placed in the Content region or another region.