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

Adding the patch to fix the wide image issue for reference I am attaching the screenshot here.

Tested the #2 patch. The issue is not resolved as approached. UI is still breaking and showing a horizontal scrollbar after adding the patch.
Please refer to the screenshot.

#5 Please verify the patch

Verified patch #5 on Drupal 9.5.x
Patch applied successfully and also horizontal scrolling is removed now but UI is still breaking

Please refer to the screenshot.

Please review for 10.1.x.

Patch #9 applied successfully on Drupal 10.1.x and PHP 8.1.6.
Refer to screenshots.

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.
Moving to RTBC
Thanks

The Needs Review Queue Bot tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request. Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

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 css grid 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 ?