Workspace drawer CSS fix for better consistency

I am at Drupalcon Amsterdam, and will review this problem now.

At Amsterdam 2019, helping out on this issue as a Mentor

I am at Drupalcon Amsterdam 2019 and I am helping on This.

I am at Drupalcon Amsterdam 2019, and will review this proble

After the patch, the button appears correctly on Desktop and mobile.

Everything looks good except that on Ubuntu 18.04 when using browser Google Chrome version 70.0 and the Umami theme, the element still looks broken under 767px screen width.

I am at Drupalcon Amsterdam 2019 and I am helping on This.

Worked on the patch with martamarczak, it fixes the problem with the button being overlapped by the active workspace on ubuntu chrome for on mobile viewport.

Mentored by chrisdark and realityloop

I mentored @martamarczak and @breakfull on this issue

It seems to be nice @breakfull and @StevenAvelino. ;-)

Tested and works.

Screenshot after the patch, on Ubuntu Chrome 77.

Works the similar way on Firefox.

I tested this on ubuntu chrome + firefox, desktop & mobile looks good and elements do not overlap each other.
I noticed that when on mobile, it actually cover the WHOLE screen. Is that how it is meant to be?

I noticed that when on mobile, it actually cover the WHOLE screen. Is that how it is meant to be?

As far as I know, yes :)

1. +++ b/core/modules/workspaces/css/workspaces.toolbar.css
   @@ -69,6 +69,7 @@
    .workspaces-dialog.ui-widget.ui-widget-content {
   ...
   +  font-size: 13px;
   

   This seems like an off-canvas problem. I'd say we should make this a separate issue that is done in the scope of the whole off-canvas.

2. +++ b/core/modules/workspaces/css/workspaces.toolbar.css
   @@ -236,6 +237,7 @@
      #drupal-off-canvas .active-workspace {
   +    box-sizing: content-box;
   

   👍This is caused by div elements not being in the scope of the off-canvas reset.

3. +++ b/core/modules/workspaces/css/workspaces.toolbar.css
   @@ -294,4 +296,8 @@
   +  #drupal-off-canvas .active-workspace {
   +    position: inherit;
   +  }
   

   We probably should move this to a separate issue since this is not related to the desktop problem.

Thanks for the review!

Re #22:

1. Fair point, I'll open a separate issue for this.

3. The mobile viewport problem is also in the Workspace drawer, and also for the Umami theme, so I think it should be ok handle it here as well. Updated the issue summary to mention it and added the before/after screenshots.

Here's the followup for the off-canvas font size issue: #3094668: UI elements inside the off-canvas dialog have a higher font size in Umami

This is still kind of broken for me. This is how this looks with Chrome 78.0.

And this is how this looks in iOS 13.1 Safari.

Sorry that I didn't provide any context on #22.3. The reason for pushing back on that was that I thought it would have been nice to get the issue described in the issue summary at the time fixed with the least resistance. I'm still fine moving this to a separate issue. However, if we want to fix that here, we should make sure that the bug is actually resolved on all browsers.

Whoa.. I didn't realize the mobile appearance was this broken :/ In that case, #22.3 / #25 makes perfect sense, let's leave the mobile problems to another issue.

Committed 9868712 and pushed to 9.0.x and 8.9.x. Thanks!

Leaving open for a backport to 8.8.x after the freeze is over.

Cherry-picked to 8.8.x.

The mobile problems discovered in #25 are handled in #3100611: Improve the Workspaces toolbar UI for desktop and mobile :)