Olivero: wide image can overlap sidebar when toolbar open and in vertical mode

Hi mherchel,

Small changes in code regarding you issue please review.

Thanks!

re #5 @vikashsoni adding a screenshot that shows a patch applies provides zero benefit. The Drupal test runner automatically confirms a patch is able to apply, there's no reason to provide additional evidence of this. This can be seen in #3

This has been pointed out to you before: #3217924: Olivero: Convert all colors (blues and grays) to HSL and normalize hues and saturations. . I encourage you to use Drupal Slack to ask questions about how to contribute to issues in a way that benefits them. It can be confusing at first but many of us are happy to assist.

Applied patch #3 and it fixes the issue.Adding screenshots.

Before:

After:

RTBC +1

+++ b/core/themes/olivero/css/components/header-navigation.css
@@ -107,6 +107,10 @@ html.js .header-nav {
+body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+  margin-left: 0;
+}

This approach won't work as it results in the vertical menu covering interactable parts of the page. For example, the menu toggle can no longer be accessed. There are two significant reasons this is a problem 1) This deviates from the expected functionality - in all other themes the full page is still interactable 2) It it an accessibility violation as there's areas where an element could be focused but the focus state not visible.

This should probably be addressed in a way that has the image resizing to the width available to it.

@mherchel @bnjmnm Yes we should use max-width here and I just checked image is already having max-width 100% even overlapping issue is also not present. Attaching screenshot,

Let me know if I am on the wrong path or checking something else.

Thanks!

Verified and tested patch #3.
Patch applied successfully.

Testing Steps:
# Go to Appearance -> Set Olivero theme
# Set the toolbar in vertical mode
# Place the custom block in the sidebar region
# Save it
# Create an article page with uploading an image
# Save it and see the results

Expected Results:
# wide image should not overlap on the sidebar when toolbar open and in vertical mode

Actual Results:
# wide image can overlap sidebar when toolbar open and in vertical mode

Test Results: Wide image is not overlapping on the sidebar when the toolbar is in an open and vertical mode but there should be some margin on the left side also. The image should not touch the toolbar.

Please refer attached screenshots.
Can be a move to Needs work.

Hi,

Creating new patch with changes in code to fix overlapping with sidebar when vertical toolbar is opened.

Please review the patch

Thanks

Fixed custom command failure

Normal priority bug under the normal issue priority definition:

Bugs for site visitors that do not interfere with site use, for example, visual layout issues.

Re-rolled patch#13 for drupal version 9.5.x-dev.Also reviewed the issue with the re-rolled patch.Adding screen shots for the reference.Thanks @Ranjith Kumar

Applied patch #13.
It's working successfully.
this bug occurs only on if you upload image on Article content type.
It is working fine in basic page content type.

As site moderator, I unpublished one junk comment (uploaded screenshot of patch applying successfully) by vikashsoni that was reported to the site moderators as spam.

For reference, please see item #11 on the list of things not do do.

I don't think applying width: auto to image container is the right fix for this issue, as it disrupts the main idea and design behind extending the image from both left and right sides.
I would suggest to extend the width of the main container and reduce the width for textual content only (keeping the width of the image same as outer container). Which will give the desired (design) output without creating such issues.
The issue is causing because the width is increased beyond its available width and -ve margin-left is applied to it.

@bnjmnm, @mherchel Your thoughts please.

We ran into this same bug while working on Experience Builder over at #3468106-26: Render component tree inside the default theme, as a regular page.

I have verified this issue on Drupal core version 11.x and it is not reproducible. Steps followed:-

1. Placed 2 blocks in the sidebar region of block layout.
2. Added an image field in Article content type.
3. Created an Article page with a wide image.

In the frontend, the image size is adjusted to fit in the content region and is not overlapping with sidebar content. Please find the attached screenshot for reference.

I have checked the related issue linked here. I think it would be better to create a separate ticket for the issue mentioned there as the primary issue mentioned in this ticket seems to be fixed. Would recommend review from others as well. So moving this ticket to Need Review.

Anyone still seeing this issue? If not we can just close this one out.

Bumping 1 more time.