From 47c69cd1eb6df0ca62039b07722f47df2b95b31b Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Thu, 18 Apr 2019 09:01:58 -0300
Subject: [PATCH] (fix) dashboard graph tablet style

---
 .../css/components/_dashboard-banner.scss     | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
index 7735f3a2f5..8a7325ab5f 100644
--- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
+++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
@@ -32,14 +32,13 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
     position: absolute;
     right: 0;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       display: none;
     }
   }
 }
 
 .dashboard-banner {
-  align-items: flex-end;
   display: flex;
   justify-content: space-between;
   margin-bottom: 3rem;
@@ -47,14 +46,17 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   z-index: 9;
 
   @include media-breakpoint-down(sm) {
-    align-items: center;
-    flex-direction: column;
+
   }
 }
 
 .dashboard-banner-network-graph {
   flex-grow: 1;
   padding: 15px 0 0 0;
+
+  @include media-breakpoint-down(md) {
+    padding-top: 20px;
+  }
 }
 
 .dashboard-banner-chart {
@@ -64,13 +66,11 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   position: relative;
 
   @include media-breakpoint-down(md) {
-    margin: 0 0 20px 0;
-    max-width: 300px;
-    width: 100%;
+    margin-bottom: 20px;
+    max-width: 100%;
   }
 
   > canvas {
-    // height: 100px;
     max-height: 100%;
     max-width: 100%;
     width: 100%;
@@ -136,6 +136,7 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
 
 .dashboard-banner-network-plain-container {
   align-items: center;
+  align-self: flex-end;
   background-color: $dashboard-banner-network-plain-container-background-color;
   border-top-left-radius: 10px;
   display: flex;
@@ -147,16 +148,21 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   width: 750px;
 
   @include media-breakpoint-down(md) {
-    align-items: flex-start;
-    flex-direction: column;
-    margin-left: 30px;
-  }
-
-  @include media-breakpoint-down(sm) {
     border-top-right-radius: 10px;
-    margin: 0;
-    padding: 15px 0 15px 15px;
+    height: auto;
+    justify-content: flex-start;
+    margin-left: 15px;
+    margin-top: 30px;
+    max-width: 100%;
+    padding: 20px 0 20px 20px;
+    width: 250px;
   }
+
+  // @include media-breakpoint-down(sm) {
+  //   border-top-right-radius: 10px;
+  //   margin: 0;
+  //   padding: 15px 0 15px 15px;
+  // }
 }
 
 .dashboard-banner-network-stats {
@@ -165,15 +171,16 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   flex-shrink: 0;
   grid-template-columns: 1fr 1fr 1fr;
 
+  @include media-breakpoint-down(md) {
+    grid-template-columns: 1fr;
+    row-gap: 20px;
+  }
+
   @include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
 
   .dashboard-banner-network-stats-item {
     @include media-breakpoint-down(sm) {
-      margin-bottom: 25px;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
     }
   }
 }
\ No newline at end of file