Multiline Admin Toolbar overlaps with horizontal & vertical menus and Page Title area

Something with the patch doesn't seem right, it looks like the whole file is being added?

Note that the correct status is "Needs review* wheny upload a patch.

Patch in comment #4 works fine!

A bit different approach here — it will pass tests and applies the needed change for the core css in toolbar module. (Patch comes from #3037284: Toolbar tray items are unclickable on really small viewport (below 16.5em), it's a dup of this issue.)

I also encountered this issue recently. After much experimenting and debugging, I found the issue to be quite larger than just the vertical menu's z-index. The horizontal menu and page title areas are also affected. The behaviors also occur after adding more buttons to the Admin Toolbar area, even in larger viewport sizes. I've attached screen captures to illustrate.

Applying the patch from Comment #14 to a fresh Drupal 8 install did not resolve the issue.

The source of these behaviors is the dynamic height of the Admin Toolbar area. As more buttons are added to the Toolbar menu, it takes up more than one line and the entire area grows taller. This causes the original z-index issue (for both vertical and horizontal menus). A taller Toolbar Admin area also obscures more and more of the Page Title area.

So for horizontal and vertical menus as well as the main page area itself, the CSS 'top' property needs to dynamically adjust so that these elements always begin at the bottom of the Admin Toolbar area. I have a patch which I'll post in my next comment.

Lastly, this is my very first time to contribute to a Drupal community discussion. Please accept my apologies in advance if I've not quite gotten the process down just yet.

This is a small jQuery block appended to toolbar.js that addresses the behavior described in Comment #15.

To replicate the issue:

1. Create a fresh Drupal install.
2. Install the Toolbar Menu module.
3. Add as many new Toolbar buttons as needed to force your Toolbar to take up 2 or more lines.
4. Refresh your site page and observe the horizontal and vertical toolbars. They will likely overlap with the button text on the second, third lines, etc.
5. Also, the Page Title area may be partially obscured by the Toolbar area. (Your site's logo will be the most obvious indicator of this behavior.)

To test the patch:

1. Apply the patch from Comment #16.
2. Refresh your site page and test the horizontal and vertical toolbars. They should always appear at the bottom of the Toolbar area, and no menu items should overlap with any Toolbar button text.
3. Also verify that your Page Title area begins at the bottom of the Toolbar area. Your site's logo should be fully visible.
4. Also verify the fix still works when rotating your page on a mobile device or tablet, or by clicking other Toolbar buttons that expose different menus.

Changed Line 209 of toolbar.js from:

toolbarPopupMenu = $('.toolbar-tray'),

to:

toolbarPopupMenu = $('.toolbar-tray, .block-demo-backlink'),

to also force-top-align the "Exit block region demonstration" link at the bottom of a multi-line admin toolbar.

To view the fix, repeat the Replicate and Patch Test steps listed under Comment #16.

If you find that the toolbars and/or "Exit block region demonstration" links are still a few pixels above or below the bottom edge of the admin toolbar, then modify Line 212 in your local copy of toolbar.js by adding/subtracting the number of pixels necessary from the tBarHeight variable.

@Eddie McHam I reviewed the patch #18 with Drupal core 8.9.x and it is working fine. Check screenshots before/after applying the patch.

+++ b/core/modules/toolbar/js/toolbar.js
@@ -172,4 +172,62 @@
-})(jQuery, Drupal, drupalSettings);
...
+})(jQuery, Drupal, drupalSettings);
...
+$ = jQuery.noConflict();
+$(document).ready(function(){

could we add this code to the pre-existing Drupal behaviors?

This isn't building off of any previous patches so there's no interdiff. The offset calculation was based on the height of a single toolbar tab instead of the overall toolbar, which would result in a single-line height regardless of how many lines were present. It looks like this can be taken care of with a small modification to how toolbar is calculating the top padding + a small CSS change.

I opted to not change this for vertical trays at it visually seems to make more sense to have them attached to the top row. The z index is increased so there isn't a conflict with toolbar items underneath it. This can definitely be changed if there's differing opinions on this.

@Eddie McHam that was a clever solution, though! For future issues you'll want to work on the .es6.js file as opposed to the .js ones. More info on this can be found here: https://www.drupal.org/node/2815083

Had to update the StableDecoupled test since a core css file was changed.

#15 changed the scope of this issue :(

Reopening #3037284: Toolbar tray items are unclickable on really small viewport (below 16.5em) since it is not a duplicate anymore.

But please, please, don't change the scope of the issues. The current title talks about a different bug than the original report. (Below 16.5em means e.g. 240 pixels).

Now, this issue duplicates #2958478: Toolbar height calculation is faulty in multiple cases, where I also added a test coverage.

Regarding the patches on comments 25 & 27: I tried applying these to a D8.9.x site, but the toolbar issue behavior persists.

So I will need to continue using the patch I submitted on comment 18. I am aware it does not conform to the ES6 method of JS development, which is very new to me.

Or if someone can please advise how I can get the latest patch to work on 8.9.x, that would be most appreciated.

Thanks, Eddie

Patch #27 not work in drupal 10.1.0 please reroll the patch.
Thank you.

I have been reroll the patch for the version 10.1.x and also attaching the reroll_diff along with the patch.

Fixed CCF for #38.
Please review.

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.

As a bug this will need a test case

Issue summary should be updated with proposed solution, screenshots, remaining tasks, etc. Recommend using default template

Patch #39 had failures.

This came up in BSI random triage. #40 still applies.

The Toolbar Module was approved for removal in #3476882: [Policy] Move Toolbar module 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 #3484850: [meta] Tasks to deprecate Toolbar module and the removal work in #3488828: [meta] Tasks to remove Toolbar module.

Toolbar will be moved to a contributed project before Drupal 12.0.0 is released.

Toolbar has moved to contrib