chore: modify chart

1 files changed, 27 insertions, 5 deletions

diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.scss
index 85281e2..2b0bcdf 100644
--- a/src/components/TrafficNow.module.scss
+++ b/src/components/TrafficNow.module.scss
@@ -1,11 +1,12 @@
 .TrafficNow {
   color: var(--color-text);
   display: flex;
-  flex-direction: column;  grid-gap: 20px;
+  flex-direction: column;
+  grid-gap: 20px;
   gap: 20px;
   padding: 10px 0;
 
-.overview {
+  .overview {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
@@ -23,19 +24,40 @@
     }
   }
 
+  .chartsRow {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    @media (min-width: 768px) {
+      flex-direction: row;
+
+      & > .sec {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
   .sec {
     padding: 20px;
     background-color: var(--color-bg-card);
     border-radius: 12px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 140px;
 
     &:hover {
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      box-shadow:
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
     }
 
     .header {