Hide the gutter menu at low width resolutions

ui/app/styles/components/page-layout.scss

@@ -31,10 +31,27 @@
         bottom: 0;
         top: $header-height;
         z-index: $z-gutter;
+        background: $white;
       }
 
       &.is-right {
         margin-left: $gutter-width;
+        overflow-x: auto;
+      }
+
+      @media #{$mq-hidden-gutter} {
+        &.is-left {
+          top: 0;
+          left: -$gutter-width;
+
+          &.is-open {
+            left: 0;
+          }
+        }
+
+        &.is-right {
+          margin-left: 0;
+        }
       }
     }
   }

ui/app/styles/core/navbar.scss

@@ -79,6 +79,10 @@
 
     &.is-gutter {
       width: $gutter-width;
+
+      @media #{$mq-hidden-gutter} {
+        width: 0;
+      }
     }
   }
 }

ui/app/styles/core/tabs.scss

@@ -42,5 +42,9 @@
     + * {
       margin-top: 5em;
     }
+
+    @media #{$mq-hidden-gutter} {
+      left: 0;
+    }
   }
 }

ui/app/styles/core/variables.scss

@@ -39,3 +39,5 @@ $breadcrumb-item-color: $white;
 $breadcrumb-item-hover-color: $white;
 $breadcrumb-item-active-color: $white;
 $breadcrumb-item-separator-color: $primary;
+
+$mq-hidden-gutter: 'only screen and (max-width : 960px)';