[Discover] Add responsive layout

src/plugins/discover/public/application/_discover.scss

@@ -36,14 +36,13 @@ discover-app {
   flex-grow: 1;
   display: flex;
   overflow: hidden;
-}
-
-.dscApp__sidebar {
-  flex-grow: 0;
-  flex-basis: auto;
-  min-width: 250px;
-  display: flex;
-  flex-direction: column;
+  @include euiBreakpoint('xs', 's') {
+    flex-grow: 0;
+    flex-wrap: wrap;
+    margin-left: 0;
+    margin-right: 0;
+    overflow-y: auto;
+  }
 }
 
 .dscApp__content {
@@ -56,7 +55,7 @@ discover-app {
 
 .dscHistogram {
   display: flex;
-  height: 200px;
+  height: $euiSize * 12.5;
   padding: $euiSizeS;
 }
 // new slimmer layout for data grid
@@ -86,6 +85,15 @@ discover-app {
   display: flex;
   overflow: hidden;
 
+  @include euiBreakpoint('m', 'l', 'xl') {
+    margin-right: $euiSize;
+    margin-bottom: $euiSize;
+  }
+
+  @include euiBreakpoint('xs', 's') {
+    margin: $euiSizeS;
+  }
+
   .kbn-table {
     margin-bottom: 0;
   }
@@ -138,10 +146,9 @@ discover-app {
   }
 }
 
-// SASSTODO: replace the padding value with a variable
 .dscTable__footer {
   background-color: $euiColorLightShade;
-  padding: 5px 10px;
+  padding: $euiSizeXS $euiSizeS;
   text-align: center;
 }
 
@@ -150,10 +157,6 @@ discover-app {
   flex-direction: column;
   display: flex;
   overflow: hidden;
-  h3 {
-    margin: -20px 0 10px 0;
-    text-align: center;
-  }
 }
 
 .dscResults__interval {
@@ -196,28 +199,22 @@ discover-app {
   }
 }
 
+.dscCollapsibleSidebar__collapseButton {
+  align-self: flex-start;
+  &:not(.closed) {
+    position: relative;
+    left: -$euiSizeS;
+  }
+}
+
 .dscCollapsibleSidebar {
   position: relative;
   z-index: $euiZLevel1;
 
-  .dscCollapsibleSidebar__collapseButton {
-    position: absolute;
-    top: 0;
-    right: -$euiSizeXL + 4;
-    cursor: pointer;
-    z-index: -1;
-    min-height: $euiSizeM;
-    min-width: $euiSizeM;
-    padding: $euiSizeXS * .5;
-  }
-
   &.closed {
     width: 0 !important;
     border-right-width: 0;
     border-left-width: 0;
-    .dscCollapsibleSidebar__collapseButton {
-      right: -$euiSizeL + 4;
-    }
   }
 }
 

src/plugins/discover/public/application/angular/directives/_no_results.scss

@@ -1,3 +1,6 @@
 .dscNoResults {
+  @include euiBreakpoint('xs', 's') {
+    padding: 0 $euiSizeS;
+  }
   max-width: 1000px;
 }

src/plugins/discover/public/application/components/discover.scss

@@ -11,3 +11,21 @@
     }
   }
 }
+
+.dscSidebar__mobile {
+  width: 100%;
+  padding: 0 $euiSizeS $euiSizeS;
+  .dscSidebar__sectionStatic {
+    padding: 0;
+  }
+  .dscSidebar__mobileButton {
+    justify-content: space-between;
+  }
+  .dscSidebar__mobileBadge {
+    margin-left: $euiSizeXS;
+  }
+}
+
+.dscSidebarFlyout__header {
+  align-items: center;
+}