Refactor CSS and React logic for layout (#1424)

* Refactor CSS layout and react logic for layout

Fixes https://github.com/chanzuckerberg/cellxgene/issues/1022

* Menubar should wrap inside middle pane instead of overlapping left
  sidebar when window is scrunched
* cellxgene should have a minimum width of 1240px

1. Replace absolute positioning and dimension calculation with css grid
2. Use flexbox for wrapping menubar buttons

* Middle pane (graph) can calculate its own size
* Removing components calculating their size/position relative to
  eachother increases modularity, decreases use of global variables
* Improved some scrollbar behavior
* Removed responsive reducer, propagating window size to components
  triggers unnecessary events and encourages breaking modularity; doing
  this made some components state agnostic

Reference: https://css-tricks.com/snippets/css/complete-guide-grid/

* Reposition the continuous legend

* Small fixes

* Respond to feedback from @colinmegill

* Respond to feedback from @colinmegill

Add more documentation on the renderGraph method.

client/src/components/leftSidebar/index.js

@@ -7,41 +7,29 @@ import DynamicScatterplot from "../scatterplot/scatterplot";
 import TopLeftLogoAndTitle from "./topLeftLogoAndTitle";
 
 @connect((state) => ({
-  responsive: state.responsive,
   scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
   scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
 }))
 class LeftSideBar extends React.Component {
+
   render() {
-    const {
-      responsive,
-      scatterplotXXaccessor,
-      scatterplotYYaccessor,
-    } = this.props;
-
-    /*
-    this magic number should be made less fragile,
-    if cellxgene logo or tabs change, this must as well
-    */
-    const logoRelatedPadding = 50;
-
+    const { scatterplotXXaccessor, scatterplotYYaccessor } = this.props;
     return (
       <div
         style={{
-          position: "fixed",
-          backgroundColor: "white",
           /* x y blur spread color */
           borderRight: `1px solid ${globals.lightGrey}`,
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
         }}
       >
         <TopLeftLogoAndTitle />
         <div
           style={{
-            height: responsive.height - logoRelatedPadding,
-            marginTop: logoRelatedPadding,
+            height: "100%",
             width: globals.leftSidebarWidth,
             overflowY: "auto",
-            overflowX: "hidden",
           }}
         >
           <Categorical />