chore: chart height

5 files changed, 30 insertions, 2 deletions

diff --git a/src/components/Home.module.scss b/src/components/Home.module.scss
index deee456..07098aa 100644
--- a/src/components/Home.module.scss
+++ b/src/components/Home.module.scss
@@ -8,6 +8,16 @@
 }
 .chart {
   margin-top: 25px;
+  height: 50vh;
+  @media only screen and (min-width: 600px) {
+    height: 55vh;
+  }
+  @media only screen and (min-width: 768px) {
+    height: 60vh;
+  }
+  @media only screen and (min-width: 1200px) {
+    height: 75vh;
+  }
   display: grid;
   grid-gap: 20px;
   grid-template-columns: 100%;
diff --git a/src/components/MemoryChart.module.scss b/src/components/MemoryChart.module.scss
index b31c095..63f4697 100644
--- a/src/components/MemoryChart.module.scss
+++ b/src/components/MemoryChart.module.scss
@@ -1,4 +1,14 @@
 .TrafficChart {
   color: var(--color-text);
   background-color: var(--color-bg-chart);
+  height: 23vh !important;
+  @media only screen and (min-width: 600px) {
+    height: 25vh !important;
+  }
+  @media only screen and (min-width: 768px) {
+    height: 27vh !important;
+  }
+  @media only screen and (min-width: 1200px) {
+    height: 35vh !important;
+  }
 }
diff --git a/src/components/MemoryChart.tsx b/src/components/MemoryChart.tsx
index a8a32b2..7e60528 100644
--- a/src/components/MemoryChart.tsx
+++ b/src/components/MemoryChart.tsx
@@ -22,7 +22,6 @@ const chartWrapperStyle = {
   justifySelf: 'center',
   position: 'relative',
   width: '100%',
-  height: '200px',
   borderTop: '2px solid #30363d',
 };
 
diff --git a/src/components/TrafficChart.module.scss b/src/components/TrafficChart.module.scss
index b31c095..63f4697 100644
--- a/src/components/TrafficChart.module.scss
+++ b/src/components/TrafficChart.module.scss
@@ -1,4 +1,14 @@
 .TrafficChart {
   color: var(--color-text);
   background-color: var(--color-bg-chart);
+  height: 23vh !important;
+  @media only screen and (min-width: 600px) {
+    height: 25vh !important;
+  }
+  @media only screen and (min-width: 768px) {
+    height: 27vh !important;
+  }
+  @media only screen and (min-width: 1200px) {
+    height: 35vh !important;
+  }
 }
diff --git a/src/components/TrafficChart.tsx b/src/components/TrafficChart.tsx
index 114d03b..2f22de4 100644
--- a/src/components/TrafficChart.tsx
+++ b/src/components/TrafficChart.tsx
@@ -17,7 +17,6 @@ const chartWrapperStyle: React.CSSProperties = {
   justifySelf: 'center',
   position: 'relative',
   width: '100%',
-  height: '200px',
   borderTop: '2px solid #30363d',
 };