Olivero: "Wide image", blockquote, code blocks create horizontal scrolling when toolbar is in vertical mode and open

1. +++ b/core/themes/olivero/css/base/base.css
   @@ -51,6 +51,10 @@ body.is-fixed {
   +  overflow-x: hidden;
   

   I'm not sure putting overflow to hidden on the body element is a best practice solution.

   Let's find the elements that are overflowing, and fix those instead.

2. +++ b/core/themes/olivero/css/components/wide-image.css
   @@ -33,9 +33,10 @@
   +    width: 100%;
   

   Would 'max-width' be better here in stead of 'width'. That means we would not be changing the original design, but also means on a _very_ large screen the image would not scale to the full width (if this is not desired).

3. Let's find the items that are causing this issue, such as blockquote and start fixing those items. We don't want the code content in a blockquote or other places being cut off by an overflow: hidden.

Based on comment #13, make the change according the suggestion and create a new patch (3283391-15.patch) for 11.x (wide-image.css renamed in wide-content.css 11.x) so it's only for 11.x. attached image for reference.
Tested the 3283391-9.patch with 10.1.x and 11.x throwing a error in applied.

Needs Review.

Before patch in 11.x

After patch

Tested patch #15 on Drupal 11 the patch is working fine for me. The horizontal scroll issue has been fixed now. Attached before/after screenshots below.
Moving to RTBC
Thanks

After spending a hour or more on this i can say that probably this issue will never get completed and merged.
This issue requires a complete rework of layout system.

First of all trying to resolve this issue by adding the following code is no-go, since disabling horizontal overflow with this way means there is something wrong with CSS in the tree somewhere (which is true). This code is a quick-fix, of course you can use it on your commerce projects, but it will never be merged. In Drupal core we are about to fix original issues than providing bicycles.

+ .toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+   overflow-x: hidden;
+ }

Now about what we could do. The hardest part is that with wide-image we have overwritten grid with negative margins. But original issue is not related to wide-image case, but instead it's related to our CSS grid layout system which isn't taking into account vertical toolbar case. Besides, a whole grid system is complicated with several CSS variables defined. Some of them are overwriting each other on different breakpoints. And what's most important Olivero CSS breakpoint system is not equal to administration toolbar breakpoint system. But administration toolbar gives us CSS variable --drupal-displace-offset-left: 240px; which is added in html tag via style attribute. This variable is 0px when toolbar is in horizontal mode, and != 0px value when it's in vertical mode. So generally speaking we have to use this variable in our CSS grid system. But it's not easy (i tried).

I'm thinking maybe we can try to solve this issue when SDC will come in Olivero so we will replace everything by SDC components where we can re-think grid system

@mherchel what do you think ?