Mobile menu is not positioned correctly when side canvas is open

When announcement off-canvas dialog is open, container is taking the wrong width. I have fixed that and provided the patch, Please review.

Fixed CCF, attached interdiff for same

The patch applies cleanly, and seems to fix the issue. However, it does create a very small layout shift.

If Olivero maintainers are okay with this small shift (it's about 6px), I think this could be marked RTBC.

Before:

After:

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request → as a guide.

This could use an issue summary update. Proposed solution is empty, obviously the goal is to fix it but how was it being fixed?
Before/after screenshots should be added to the IS also.

Unfortunately, I think this approach will not work. Between the range of screen widths that show the mobile menu (including the desktop version in some configurations), and the resizability of the off-canvas menu, I don't think we want the menu button to move at all, unless the entire slide-out menu moves with it to avoid situations where the menu button leaves it's visual (but not DOM) container as in the screenshot below (patch #4 applied along with MR #2889 from [
#3206643])

Because of the interactions between the offcanvas dialog and the navigation, I'm adding the needs accessibility review tag

I will review this patch and confirm the same. Is it working fine or not

Reviewed the patch #4 and tested it on Drupal version 10.1.x. The patch works fine and I have added the before and after screenshot for reference.

Reviewed MR !3490, on comment #9 , issue has been fixed, can be merged.

Adding credits

i don't think this needs an a11y review as its just CSS changes

Committed to 10.1.x and 10.0.x

Does not apply to 9.5.x so marking as patch (to be ported)

I have added patch for 9.5.x. but I see a problem while compiling the patch. This CSS code
transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ is compiled into transform: translateX(-100%); /* LTR */ which seems to be an issue for me. I see calc() function is calculating on the compilation time only, noticed that for other units as well. this is happening in 9.5.x only not on 10.1.x

@Gauravvv that is probably due to Drupal 9's supported browsers. If this is complex to backport, I think we should leave it in 10.0.x.

Automatically closed - issue fixed for 2 weeks with no activity.