From e0a5fef3695edc0a5e4595603b86c97b53b3a899 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 21 Jun 2019 16:09:26 +0300
Subject: [PATCH] fix(traffic): prevent container overflow

---
 .../traffic/traffic-chart.component.ts        |  1 -
 .../dashboard/traffic/traffic.component.scss  | 20 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts
index 95023435..2dd80503 100644
--- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts
+++ b/src/app/pages/dashboard/traffic/traffic-chart.component.ts
@@ -5,7 +5,6 @@ import { LayoutService } from '../../../@core/utils';
 
 @Component({
   selector: 'ngx-traffic-chart',
-  styleUrls: ['./traffic.component.scss'],
   template: `
     <div echarts
          [options]="option"
diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss
index 07bb25d3..c6eb6172 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.scss
+++ b/src/app/pages/dashboard/traffic/traffic.component.scss
@@ -15,14 +15,20 @@
     padding-bottom: 0.45rem;
   }
 
-  ::ng-deep canvas {
-    border-bottom-left-radius: nb-theme(card-border-radius);
-    border-bottom-right-radius: nb-theme(card-border-radius);
+  ngx-traffic-chart {
+    flex: 1;
   }
 
-  .echart {
-    position: absolute;
-    height: 100%;
-    width: 100%;
+  ::ng-deep {
+    .echart {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    canvas {
+      border-bottom-left-radius: nb-theme(card-border-radius);
+      border-bottom-right-radius: nb-theme(card-border-radius);
+    }
   }
 }