Unclickable area to switch to a workspace

Toolbar css causing issue. Please find the attachment and SS

Verified and tested by applying the patch#5.It is not fixed.

Steps to test-
1. Go to the admin site.
2. Go to admin/modules -> Enable the workspace.
3. Click on vertical scrollbar.
4. Go to admin/content -> Click on Live -> Click on Stage.

Refer to the videos attached

Fixed. Tested on Seven, Bartik, Classy, Claro, Umami

Step to Test:

1. Go to the admin site.
2. Go to admin/modules -> Enable the workspace.
3. Click on vertical scrollbar.
4. Go to admin/content -> Click on Live -> Click on Stage.

Please refer the attached videos and patch

Just noticed the issue "Unclickable area to switch to a workspace" is only reproducible while the menu items are in the vertical orientation.

Tested the patch from #9 on 8.8.5, patch worked.

Also, I found a similar issue on 9.1.x, applied the same patch and it worked for me. Please refer to the attached video clips.

Aren't those styles there for a reason? I think we need an opinion from someone who was involved in writing the CSS for core's toolbar.

Would be great to get a review from toolbar subsystem maintainer on why this CSS was introduced in the first place.

I had a look and went through the history a bit. It seems like in #2100133: The Toolbar tray box shadow disappears at small viewports sizes on Chrome, on a Mac, under unpredictable conditions the styling for the shadow moved from the pseudo-element to the
actual element. Meaning that the whold lining:before pseudo element is unnecessary.

Which mean the patch is ok, and we could even remove the 2 rules around it that deal with lining:before.

Thanks @nod_, that's very helpful!

Which mean the patch is ok, and we could even remove the 2 rules around it that deal with lining:before.

Done :)

Attaching a patch for 8.9.x, which doesn't have the stable9 theme.

RTBC +1

If we are going to delete dead code as part of this too, can we delete this too?

.toolbar .toolbar-tray-vertical > .toolbar-lining {
  min-height: 100%;
}

And how about this:

.toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
  width: 999em;
}

There's also this in toolbar.theme.css which I suspect we might be able to remove:

.toolbar-horizontal .toolbar-tray > .toolbar-lining {
  padding-right: 5em; /* LTR */
}

Thanks for the review, @lauriii! I did all the changes from #21 and also tested manually and didn't see any visual differences for the toolbar, with and without the patch.

Even though the rules I mentioned in #21 could be unnecessary, I decided to commit #18 instead of #22 to keep the changes only to the pseudo element.

Committed 8790ee9 and pushed to 9.1.x, 9.0.x and 8.9.x. Thanks!