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

Merge request created. Before and after screenshots attached.

Thanks for the MR.

Checked and the patch applies cleanly to 9.3 and 9.4 and with an offset for 10 (see below). Needs testing for all of these so tagging.

[drupal-10.0.x-dev/10.0.x] [drupal-10.0.x-dev]$ patch -p1 < 1737.diff 
patching file core/themes/olivero/css/layout/layout-content-narrow.css
Hunk #1 succeeded at 175 (offset -98 lines).
patching file core/themes/olivero/css/layout/layout-content-narrow.pcss.css
Hunk #1 succeeded at 92 (offset -44 lines).

Working fine for me after applying patch file

Testing steps :
1. Go to any of the Basic page
2. Make sure that some text is added with the quotes or images, videos etc
3. Now click on manage and click on Horizontal orientation to change as vertical orientation
4. Now the admin toolbar should be in vertical orientation and verify the elements overflow issue in small screen

Version: 9.4.x
Expected : elements should not overflow either in to sidebar, or cause horizontal scrolling

The screenshot from #7 is from Umami but this issue is against Olivero.

I tested this merge request and it fixes the issues with the blockquotes, but formatted content is still broken.
I generated the <pre> tag using the "formatted" paragraph format from the RTF options.

before

after

In the case of <pre> tags, maybe overflow: scroll could be used, which is a common solution for this issue.

Thanks for testing. I've updated the issue summary to use the template and added steps to reproduce based on #7. And, I've removed the "Needs manual testing" tag for now until the patch gets updated.

Attached is a patch that applies to the merge request (drupal-3221247/3221247-olivero-various-elements) for adjusting the pre elements alignment, I couldn't find any references in Figma regarding the design / layout of pre, so I just made sure that it stays inside the container. See screenshot below.

Thanks for the updated patch but it's not applying so moving back to needs work.

[drupal-9.4.x-dev/9.4.x] [drupal-9.4.x-dev]$ patch -p1 < olivero-3221247-13.patch 
patching file core/themes/olivero/css/layout/layout-content-narrow.css
patching file core/themes/olivero/css/layout/layout-content-narrow.pcss.css
patching file core/themes/olivero/css/layout/region-content.css
patch: **** malformed patch at line 96:  .region--content {

@kristen-pol, I could add the changes to the same merge request that's that was opened before: https://git.drupalcode.org/project/drupal/-/merge_requests/1737/diffs

The patch is not longer relevant, please ignore it. I'm moving this to "needs review" again.

Thanks for the updated MR(patch). Tagging for testing for 9.4.

Embedded before screenshot in issue summary.

Patch #13 not working on drupal 10.1.x-dev.

Can we get a fix committed, please? Still broken in 10.3.2.

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.

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.