The CSS provided by the Workspaces module that is responsible for styling the off-canvas drawer isn't explicit enough to prevent themes from breaking the box sizing.

How to reproduce the bug

  1. Install the Umami demo profile
  2. Install the Workspaces module
  3. Navigate to the front page (or any page using the Umami theme)
  4. Bring down the Workspaces off-canvas drawer by clicking on the workspace name in the toolbar
  5. Notice how the styling is broken
  6. Additionally, resize the browser window to simulate a mobile viewport and notice that the styling is broken there as well.

Before applying the patch

Before patch

After applying the patch

After patch


Mobile viewport - Before applying the patch

Before patch

Mobile viewport - After applying the patch

After patch

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dixon_ created an issue. See original summary.

dixon_’s picture

Status: Active » Needs review
FileSize
634 bytes
dixon_’s picture

Issue tags: +Novice
dixon_’s picture

Issue summary: View changes
dixon_’s picture

Issue summary: View changes
dixon_’s picture

Issue tags: +Amsterdam2019
kris_nikolov’s picture

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

ChrisDarke’s picture

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

Michael.J.Gleeson’s picture

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

StevenAvelino’s picture

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

StevenAvelino’s picture

Version: 8.8.x-dev » 8.9.x-dev
FileSize
38.82 KB

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

kris_nikolov’s picture

FileSize
8.39 KB
kris_nikolov’s picture

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.

martamarczak’s picture

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

kris_nikolov’s picture

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

realityloop’s picture

I mentored @martamarczak and @breakfull on this issue

vints24’s picture

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

jhuhta’s picture

Status: Needs review » Reviewed & tested by the community

Tested and works.

jhuhta’s picture

FileSize
12.97 KB

Screenshot after the patch, on Ubuntu Chrome 77.

Fixed css screenshot on Chrome 77

Works the similar way on Firefox.

shaal’s picture

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?

amateescu’s picture

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 :)

lauriii’s picture

Status: Reviewed & tested by the community » Needs work
  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.

amateescu’s picture

Issue summary: View changes
Status: Needs work » Reviewed & tested by the community
Issue tags: +Workflow Initiative
FileSize
593 bytes
453 bytes

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.

amateescu’s picture

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

lauriii’s picture

Issue summary: View changes
Status: Reviewed & tested by the community » Needs work
FileSize
57.89 KB
151.16 KB


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.

amateescu’s picture

Status: Needs work » Reviewed & tested by the community
Parent issue: » #3096017: Finalize the Workspaces UI
FileSize
448 bytes
412 bytes

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.

  • lauriii committed 9868712 on 9.0.x
    Issue #3090904 by amateescu, dixon_, breakfull, lauriii, jhuhta,...
lauriii’s picture

Version: 8.9.x-dev » 8.8.x-dev
Status: Reviewed & tested by the community » Patch (to be ported)

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.

  • lauriii committed 788f5aa on 8.9.x
    Issue #3090904 by amateescu, dixon_, breakfull, lauriii, jhuhta,...

  • lauriii committed a1ada4f on 8.8.x
    Issue #3090904 by amateescu, dixon_, breakfull, lauriii, jhuhta,...
lauriii’s picture

Status: Patch (to be ported) » Fixed

Cherry-picked to 8.8.x.

amateescu’s picture

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

Status: Fixed » Closed (fixed)

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