fixed jumping, bodycontainer size, and scrolling button

Author: CourageWolf

src/app/components/BarGraph.tsx

@@ -124,15 +124,17 @@ const BarGraph = (props) => {
     classname[i].addEventListener('click', animateButton, false);
   }
   return (
-    <div>
-      <button
-        className='save-series-button'
-        onClick={(e) => {
-          dispatch(save(toStorage));
-        }}
-      >
-        Save Series
-      </button>
+    <div className="bargraph">
+      <div className="series-options-container">
+        <button
+          className='save-series-button'
+          onClick={(e) => {
+            dispatch(save(toStorage));
+          }}
+        >
+          Save Series
+        </button>
+      </div>
       <svg ref={containerRef} width={width} height={height}>
         {}
         <rect

src/app/components/WebMetrics.tsx

@@ -91,9 +91,9 @@ const radialGraph = (props) => {
 		return (
 
 
-<div id="card">
+<div id="card" className="metric">
 	<div id="chart">
-		<Charts options={state.options} series={state.series} type="radialBar" height={250} width={250}/>
+		<Charts options={state.options} series={state.series} type="radialBar" height={200} width={200}/>
 	</div>
 </div>
 

src/app/styles/layout/_bodyContainer.scss

@@ -1,5 +1,5 @@
 .body-container1 {
-  height: 94%;
+  height: 100%;
   overflow: hidden;
   display: grid;
   grid-template-columns: min-content 2fr;

src/app/styles/layout/_stateContainer.scss

@@ -10,9 +10,10 @@
 }
 
 .toggleAC {
-  color: #00dffc;
+  // color: #00dffc;
+  color: $blue-brand;
   background: $background-color;
-  height: 75%;
+  height: 50%;
   text-decoration: none;
   border: none;
 }
@@ -196,14 +197,27 @@
 
 // Web Metrics Container
 .web-metrics-container {
-
-  // padding: 3rem;
-  // display: grid;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 3rem;
+  // padding: 3rem;
+  // display: flex;
+  // flex-wrap: wrap;
+  // margin-top: 0.1rem;
+  // position: absolute;
   // grid-template-columns: repeat(2, 1fr);
   // grid-template-rows: repeat(2, 1fr);
+}
+
+.metric {
+  min-height: 200px;
+  min-width: 200px;
+  max-height: 200px;
+  max-width: 200px;
+}
+
+.bargraph {
+  position: relative;
+  margin-top: 1rem;
 }