Closes #3820 Full-width paragraphs have a different width in the Content region compared to other regions

[bberndt-uaz]

Description

This PR adjusts the styling of full-width regions and paragraphs to:

• Remove the extra right margin from full-width content in regions besides the Content region
• Adjust the position of divs with the content class in all regions so that they align vertically with content divs in the Content region.

As part of this PR, some styling is moved from modules/custom/az_paragraphs/css/az_paragraphs_full_width.css to themes/custom/az_barrio/css/style.css since it applies to paragraphs in other regions which may display as full width even when they do not have the "Full width" checkbox checked. For example, the az-full-width-row class is included in the view display for all Text on Media paragraphs, so the styling for that class should be available wherever those paragraphs can be used.

Questions:

1. Should this be a patch release "bug fix" or a minor release "visual change"?
   • (Nov 15, 2024) We are leaning towards including this in a minor release to allow for further testing of these visual changes.
2. Do we want the Content areas of full-width Text on Media paragraphs to align vertically with the left and right edges of the standard page container (usually 1140px)? This is the current intended behavior of the PR and it would align the Content areas with the navigation menu borders, sidebar borders, etc. Or do we want the Content areas of full-width Text on Media paragraphs to be fully aligned with those of standard-width Text on Media paragraphs?
   • (Dec 11, 2024) The current behavior of the PR is acceptable: Content areas of full-width Text on Media paragraphs will be aligned with the left and right edges of other page elements (along with navigation menu borders, sidebar borders, etc.).

Release notes

Related issues

• Full-width paragraphs have a different width in the Content region compared to other regions #3820

How to test

Probo review site: https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3859.probo.build
Test page: https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3859.probo.build/brian-test-page

Compare various arrangements of standard and full-width Text with Background and Text on Media paragraphs.

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

• Patch release changes
  • Bug fix
  • Accessibility, performance, or security improvement
  • Critical institutional link or brand change
  • Adding experimental module
  • Update experimental module
• Minor release changes
  • New feature
  • Breaking or visual change to existing behavior
  • Upgrade experimental module to stable
  • Enable existing module by default or database update
  • Non-critical brand change
  • New internal API or API improvement with backwards compatibility
  • Risky or disruptive cleanup to comply with coding standards
  • High-risk or disruptive change (requires upgrade path, risks regression, etc.)
• Other or unknown
  • Other or unknown

Drupal core

• Patch release changes
  • Security update
  • Patch level release (non-security bug-fix release)
  • Patch removal that's no longer necessary
• Minor release changes
  • Major or minor level update
• Other or unknown
  • Other or unknown

Drupal contrib projects

• Patch release changes
  • Security update
  • Patch or minor level update
  • Add new module
  • Patch removal that's no longer necessary
• Minor release changes
  • Major level update
• Other or unknown
  • Other or unknown

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• My change requires release notes.

[bberndt-uaz]

@trackleft found that this PR can cause a horizontal scrollbar to be displayed when full-width paragraphs are present. Reverting to draft to work on this further.

[trackleft]

I couldn't break it

[joshuasosa]

It looks like the PR slightly changes the inner box positions.

Before

After

Before

After

(Might be easier to open both in tabs and flip between them.)

This visual change is probably ok.

[bberndt-uaz]

Thanks @joshuasosa!

Reverting to draft to:

• Confirm that box-style content areas of Text on Media paragraphs are correctly aligned on pages with and without sidebars.
• Fix width of column-style content areas in full-width Text on Media paragraphs on the page not matching the width of those paragraphs in other regions.
• Potentially add a matching margin on the right side of the content areas of standard-width Text on Media paragraphs to match the left-side margin (only if this is useful for having an outside margin when the content is set to left or right).

[bberndt-uaz]

Ready for review again! Content areas of full-width Text on Media paragraphs may be wider than before on pages with sidebars. This also reflects the decision from question 2 above, to align the left/right edges of Content areas of full-width Text on Media paragraphs with the left and right edges of other page elements (along with navigation menu borders, sidebar borders, etc.)

So the box on the Marketing Campaign page now looks like this:

[joshuasosa]

Changes look good to me! I like the text boxes now lining up with other elements.

Before

After

Before

After

[danahertzberg]

https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3859.probo.build/dana

[bberndt-uaz]

The Probo site was unavailable, but I have rebuilt it and set up the test page again. I would welcome any further review and approvals!