Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
- Install the Umami demo profile
- Install the Workspaces module
- Navigate to the front page (or any page using the Umami theme)
- Bring down the Workspaces off-canvas drawer by clicking on the workspace name in the toolbar
- Notice how the styling is broken
- Additionally, resize the browser window to simulate a mobile viewport and notice that the styling is broken there as well.
Before applying the patch
After applying the patch
Mobile viewport - Before applying the patch
Mobile viewport - After applying the patch
Comment | File | Size | Author |
---|---|---|---|
#26 | interdiff-26.txt | 412 bytes | amateescu |
#26 | 3090904-26.patch | 448 bytes | amateescu |
#25 | Simulator Screen Shot - iPhone 11 Pro Max - 2019-12-02 at 16.16.07.png | 151.16 KB | lauriii |
#25 | Screen Shot 2019-12-02 at 15.59.31.png | 57.89 KB | lauriii |
#23 | interdiff-23.txt | 453 bytes | amateescu |
Comments
Comment #2
dixon_Comment #3
dixon_Comment #4
dixon_Comment #5
dixon_Comment #6
dixon_Comment #7
kris_nikolov CreditAttribution: kris_nikolov as a volunteer commentedI am at Drupalcon Amsterdam, and will review this problem now.
Comment #8
ChrisDarke CreditAttribution: ChrisDarke at Hook 42 commentedAt Amsterdam 2019, helping out on this issue as a Mentor
Comment #9
Michael.J.Gleeson CreditAttribution: Michael.J.Gleeson commentedI am at Drupalcon Amsterdam 2019 and I am helping on This.
Comment #10
StevenAvelino CreditAttribution: StevenAvelino at Antistatique commentedI am at Drupalcon Amsterdam 2019, and will review this proble
Comment #11
StevenAvelino CreditAttribution: StevenAvelino at Antistatique commentedAfter the patch, the button appears correctly on Desktop and mobile.
Comment #12
kris_nikolov CreditAttribution: kris_nikolov as a volunteer commentedComment #13
kris_nikolov CreditAttribution: kris_nikolov as a volunteer commentedEverything 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.
Comment #14
martamarczak CreditAttribution: martamarczak commentedI am at Drupalcon Amsterdam 2019 and I am helping on This.
Comment #15
kris_nikolov CreditAttribution: kris_nikolov as a volunteer commentedWorked 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
Comment #16
realityloopI mentored @martamarczak and @breakfull on this issue
Comment #17
vints24 CreditAttribution: vints24 as a volunteer and commentedIt seems to be nice @breakfull and @StevenAvelino. ;-)
Comment #18
jhuhta CreditAttribution: jhuhta commentedTested and works.
Comment #19
jhuhta CreditAttribution: jhuhta commentedScreenshot after the patch, on Ubuntu Chrome 77.
Works the similar way on Firefox.
Comment #20
shaalI 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?
Comment #21
amateescu CreditAttribution: amateescu for Pfizer, Inc. commentedAs far as I know, yes :)
Comment #22
lauriiiThis 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.
👍This is caused by div elements not being in the scope of the off-canvas reset.
We probably should move this to a separate issue since this is not related to the desktop problem.
Comment #23
amateescu CreditAttribution: amateescu for Pfizer, Inc. commentedThanks 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.
Comment #24
amateescu CreditAttribution: amateescu for Pfizer, Inc. commentedHere'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
Comment #25
lauriiiThis 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.
Comment #26
amateescu CreditAttribution: amateescu for Pfizer, Inc. commentedWhoa.. 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.
Comment #28
lauriiiCommitted 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.
Comment #31
lauriiiCherry-picked to 8.8.x.
Comment #32
amateescu CreditAttribution: amateescu for Pfizer, Inc. commentedThe mobile problems discovered in #25 are handled in #3100611: Improve the Workspaces toolbar UI for desktop and mobile :)