Olivero: various elements (blockquote, pre, embeded media) can overflow into sidebar when vertical toolbar is present

Can we get a fix committed, please?

This will help with readability of pre fields a lot...

.region--content pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

Fixing the Overflow Issue in Drupal with

 Elements

The Issue:
We encountered a layout issue in Drupal where elements like 
, blockquotes, and embedded media were overflowing into the sidebar when the vertical toolbar was present. This was messing up the layout, making the content look cluttered and out of place.

Root Cause:
The issue was happening because these elements (especially <pre>) didn’t respect the boundaries of their container. Since <pre> preserves whitespace and line breaks, it was forcing the content to extend outside the content area, causing it to overlap into the sidebar.

Steps Followed to Fix the Issue:

Identifying the Problem:

First, we identified that the primary culprit was the <pre> element. The content inside the <pre> tags wasn’t wrapping properly, and that led to the overflow problem.
Checking the CSS:

We realized that this could be a CSS issue where the <pre> block was not being handled correctly. We needed to make sure that the content inside 
 respects the container’s width.
Solution Applied: We decided to tackle this problem by applying custom CSS to ensure the 
 content stays within the container. Here’s the magic CSS that solved it: 
Thanks @marc.bau

css
Copy code

.region--content pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

Explanation of the CSS:
white-space: pre; ensures that the whitespace inside the <pre> element is preserved.

white-space: pre-wrap; makes sure that long lines of text are wrapped properly if they exceed the width of the container.

word-wrap: break-word; ensures that if a long word or continuous string of characters is too wide for the container, it will break into the next line rather than overflowing.
Testing:
After applying this CSS, we tested the layout with different content inside <pre> blocks, and voila! The content no longer overflowed into the sidebar. The text wrapped properly, and the layout stayed intact.

saurav-drupal-dev → closed merge request !9575