Refine behavior of spy panel in Discover, Visualize, and Dashboard: (#12353)

- It doesn't push the table down in Discover.
- It squeezes the visualization until it disappears in Visualize and Dashboard.
- Hides the visualize 'no data' error behind the panel by giving it a background color.

src/core_plugins/kibana/public/discover/styles/main.less

@@ -29,11 +29,11 @@
       padding: 4px 0;
     }
 
+    /**
+     * 1. Make sure chart above table is visible.
+     */
     visualize {
-
-      .vis-container {
-        height: 200px;
-      }
+      height: 200px; /* 1 */
 
       .loading {
         opacity: 1 !important;

src/ui/public/visualize/visualize.less

@@ -13,10 +13,11 @@ visualize {
   }
 
   /**
-   * 1. Expand to fill the container but don't get squeezed smaller by the spy.
+   * 1. Expand to fill the container but accept being squeezed smaller by the spy, even so small
+   *    that it disappears entirely.
    */
   .vis-container {
-    flex: 1 0 auto; /* 1 */
+    flex: 1 1 0; /* 1 */
     display: flex;
     flex-direction: row;
     overflow: auto;
@@ -66,10 +67,10 @@ visualize {
 }
 
 /**
- * 1. Expand to fill the container but don't get squeezed smaller by the spy.
+ * 1. Expand to fill the container and accept being squeezed smaller by the spy.
  */
 .visualize-error {
-  flex: 1 0 auto; /* 1 */
+  flex: 1 1 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -79,6 +80,8 @@ visualize {
 }
 
 visualize-spy {
+  background-color: #ffffff;
+
   // this element should flex
   flex: 0 1 auto;
   padding: 0px 0px 0px 15px;
@@ -116,10 +119,16 @@ visualize-spy {
   }
 }
 
+/**
+ * 1. Restrict height of the spy and scroll if the content exceeds this height. This prevents
+ *    the spy from pushing surrounding content around, e.g. pushing the table down in Discover.
+ */
 .visualize-spy-container {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  height: 482px; /* 1 */
+  overflow-y: auto; /* 1 */
 
   header {
     padding: 0 0 15px;