Merge pull request #2547 from bezdna/mobile-layout

Trigger small screen layout based on the width of the screen, rather than the width of the menus.

app/assets/stylesheets/small.scss

@@ -91,34 +91,7 @@ body.small {
   .compact-hide {
     display: inline-block;
   }
-
-  &.map-layout {
-    #sidebar, #map {
-      position: relative;
-      overflow-x: hidden;
-      width: 100%;
-      height: 50%;
-    }
-
-    .overlay-sidebar {
-      #sidebar {
-        position: absolute;
-        width: 300px;
-        height: auto;
-        overflow: hidden;
-      }
-
-      #map {
-        height: 100%;
-      }
-    }
-
-    #map-ui {
-      z-index: 9999;
-      width: 100%;
-      overflow-y: scroll;
-    }
-  }
+  
 
   .overlay-sidebar #sidebar .welcome.visible {
     display: none;
@@ -181,3 +154,33 @@ body.small {
   }
 
 }
+
+@media (max-width: 767.98px) {
+  body.map-layout {
+    #sidebar, #map {
+      position: relative;
+      overflow-x: hidden;
+      width: 100%;
+      height: 50%;
+    }
+
+    .overlay-sidebar {
+      #sidebar {
+        position: absolute;
+        width: 300px;
+        height: auto;
+        overflow: hidden;
+      }
+
+      #map {
+        height: 100%;
+      }
+    }
+
+    #map-ui {
+      z-index: 9999;
+      width: 100%;
+      overflow-y: scroll;
+    }
+  }
+}