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/graph/setupSVGandBrush.js

@@ -14,17 +14,16 @@ export default (
   handleDragAction,
   handleEndAction,
   handleCancelAction,
-  responsive,
-  graphPaddingRight
+  viewport,
 ) => {
-  const svg = d3.select("#graphAttachPoint").select("#lasso-layer");
+  const svg = d3.select("#graph-wrapper").select("#lasso-layer");
 
   if (selectionToolType === "brush") {
     const brush = d3
       .brush()
       .extent([
         [0, 0],
-        [responsive.width - graphPaddingRight, responsive.height],
+        [viewport.width, viewport.height]
       ])
       .on("start", handleStartAction)
       .on("brush", handleDragAction)