Revert "Clean up dygraph positioning styles"

This reverts commit 1153590d6a.

ui/src/shared/components/Dygraph.js

@@ -303,7 +303,7 @@ class Dygraph extends Component {
     const hideLegend = mode === EDITING || mode === ADDING ? true : isHidden
 
     return (
-      <div className="dygraph-container" onMouseLeave={this.deselectCrosshair}>
+      <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
         {this.dygraph &&
           <Annotations
             dygraph={this.dygraph}
@@ -321,7 +321,7 @@ class Dygraph extends Component {
             this.graphRef = r
             this.props.dygraphRef(r)
           }}
-          className="dygraph"
+          className="dygraph-child-container"
           style={{...this.props.containerStyle, zIndex: '2'}}
         />
       </div>

ui/src/shared/components/LineGraph.js

@@ -89,7 +89,6 @@ class LineGraph extends Component {
       width: 'calc(100% - 32px)',
       height: 'calc(100% - 16px)',
       position: 'absolute',
-      left: '16px',
       top: '8px',
     }
 
@@ -102,10 +101,7 @@ class LineGraph extends Component {
     }
 
     return (
-      <div
-        className="line-graph line-graph__hasYLabel"
-        style={{height: '100%'}}
-      >
+      <div className="dygraph graph--hasYLabel" style={{height: '100%'}}>
         {isRefreshing ? <GraphLoadingDots /> : null}
         <Dygraph
           cell={cell}

ui/src/style/components/dygraphs.scss

@@ -1,9 +1,9 @@
 // Overrides default Dygraphs styles
 
-.dygraph-container {
-  width: 100%;
-  height: 100%;
-  position: absolute;
+.dygraph {
+  &:hover {
+    cursor: default;
+  }
 }
 
 .graph-vertical-marker {
@@ -38,6 +38,7 @@
   text-align: right !important;
   user-select: none;
 }
+.graph-container > div > div > div > div {}
 
 /* Vertical Axis Labels */
 .dygraph-ylabel,
@@ -60,7 +61,7 @@
   transform: rotate(90deg);
 }
 
-.line-graph__hasYLabel {
+.graph--hasYLabel {
 
   .dygraph-axis-label-y {
     padding: 0 1px 0 16px !important;
@@ -140,7 +141,7 @@
   Legend Styles
   ------------------------------------------------------------------------------
 */
-.dygraph .dygraph-legend {
+.dygraph-child-container .dygraph-legend {
   display: none !important; // hide default legend
 }
 .dygraph-legend {

ui/src/style/components/graph.scss

@@ -5,18 +5,6 @@
 $graph-heading-height: 44px;
 $graph-gutter: 16px;
 
-.line-graph {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  &:hover {
-    cursor: default;
-  }
-}
-
 /*
   Graph Styles
   ---------------------------------------------
@@ -120,6 +108,18 @@ $graph-gutter: 16px;
 }
 .graph-container {
   @include no-user-select();
+
+  & > .dygraph {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  & > .dygraph > .dygraph-child {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 8px 16px;
+  }
 }
 
 .graph-empty {

ui/src/style/pages/dashboards.scss

@@ -122,6 +122,19 @@ $dash-graph-options-arrow: 8px;
   left: 0;
   padding: 0;
 
+  .dygraph {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .dygraph .dygraph-child {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 8px 16px;
+  }
   .graph-panel__refreshing {
     top: (-$dash-graph-heading + 5px) !important;
   }

ui/src/style/pages/kapacitor.scss

@@ -256,13 +256,19 @@ $rule-builder--radius-lg: 5px;
 .rule-builder--graph {
   padding: 0 $rule-builder--padding-sm;
 
-  > div.line-graph {
+  > div.dygraph {
     position: absolute;
     top: ($rule-builder--padding-lg * 2);
     left: $rule-builder--padding-sm;
     width: calc(100% - #{$rule-builder--padding-sm * 2});
     height: calc(100% - #{$rule-builder--padding-lg * 2}) !important;
   }
+  > .dygraph > .dygraph-child {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 8px 16px;
+  }
 }
 .rule-builder--graph-empty {
   display: flex;