From c91a731f0e35af7ad803a4d8b30a8b3c86b80ed9 Mon Sep 17 00:00:00 2001
From: David Taylor <dtaylor113@gmail.com>
Date: Wed, 23 Aug 2017 12:46:22 -0400
Subject: [PATCH] fix(pfTrendsChart): In compact layout, tightened up space
 between labels and chart

---
 src/charts/charts.less              | 9 +++++++++
 src/charts/trends/trends-chart.html | 8 ++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/charts/charts.less b/src/charts/charts.less
index 876fcaf25..58450da63 100644
--- a/src/charts/charts.less
+++ b/src/charts/charts.less
@@ -63,6 +63,15 @@ pf-c3-chart {
   }
 }
 
+.trend-card-compact-pf {
+  .col-sm-2 {
+    padding-right: 0;
+  }
+  .col-sm-10 {
+    padding-left: 0;
+  }
+}
+
 .trend-flat-details {
   display: table;
   margin-top: 5px;
diff --git a/src/charts/trends/trends-chart.html b/src/charts/trends/trends-chart.html
index 1796a6a5f..d70d2f9d2 100644
--- a/src/charts/trends/trends-chart.html
+++ b/src/charts/trends/trends-chart.html
@@ -19,7 +19,7 @@
   </div>
   <div ng-switch-when="compact" class="trend-card-compact-pf">
     <div class="row trend-row">
-      <div class="col-sm-4 col-md-4">
+      <div class="col-sm-2">
         <div class="trend-compact-details">
           <span ng-if="$ctrl.showActualValue">
             <span class="trend-title-compact-big-pf">{{$ctrl.getLatestValue()}}</span>
@@ -32,7 +32,7 @@
           <span class="trend-header-compact-pf" ng-if="$ctrl.config.title">{{$ctrl.config.title}}</span>
         </div>
       </div>
-      <div class="col-sm-8 col-md-8">
+      <div class="col-sm-10">
         <pf-sparkline-chart ng-if="$ctrl.chartData.dataAvailable !== false" config="$ctrl.config" chart-data="$ctrl.chartData" chart-height="$ctrl.getChartHeight()"
              show-x-axis="$ctrl.showXAxis" show-y-axis="$ctrl.showYAxis"></pf-sparkline-chart>
         <pf-empty-chart ng-if="$ctrl.chartData.dataAvailable === false" chart-height="$ctrl.getChartHeight()"></pf-empty-chart>
@@ -41,12 +41,12 @@
   </div>
   <div ng-switch-when="inline" class="trend-card-inline-pf">
     <div class="row trend-row">
-      <div class="col-sm-8 col-md-8 trend-flat-col">
+      <div class="col-sm-8 trend-flat-col">
         <pf-sparkline-chart ng-if="$ctrl.chartData.dataAvailable !== false" config="$ctrl.config" chart-data="$ctrl.chartData" chart-height="$ctrl.getChartHeight()"
              show-x-axis="$ctrl.showXAxis" show-y-axis="$ctrl.showYAxis"></pf-sparkline-chart>
         <pf-empty-chart ng-if="$ctrl.chartData.dataAvailable === false" chart-height="$ctrl.getChartHeight()"></pf-empty-chart>
       </div>
-      <div class="col-sm-4 col-md-4 trend-flat-col">
+      <div class="col-sm-4 trend-flat-col">
         <div class="trend-flat-details">
           <div class="trend-flat-details-cell">
             <span class="trend-title-flat-big-pf">{{$ctrl.getPercentageValue() + '%'}}</span>