Ensure that summary items remain aligned

Default number of items is 3. If this is not the case,
then increase the column width of the summary items
to cater for 2 items plus the date filter.

2 files changed, 8 insertions, 2 deletions

diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 7744984edfc..8011ccac865 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -63,10 +63,16 @@ export default () => {
         service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath),
       };
     },
+    defaultNumberOfSummaryItems: 3,
     computed: {
       currentStage() {
         return this.store.currentActiveStage();
       },
+      summaryTableColumnClass() {
+        return this.state.summary.length === this.$options.defaultNumberOfSummaryItems
+          ? 'col-sm-3'
+          : 'col-sm-4';
+      },
     },
     created() {
       // Conditional check placed here to prevent this method from being called on the
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 6b56a4ee7ab..356cc02d178 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -13,10 +13,10 @@
       .content-block
         .container-fluid
           .row
-            .col-sm-3.col-12.column{ "v-for" => "item in state.summary" }
+            .col-12.column{ "v-for" => "item in state.summary", ":class" => "summaryTableColumnClass" }
               %h3.header {{ item.value }}
               %p.text {{ item.title }}
-            .col-sm-3.col-12.column
+            .col-12.column{ ":class" => "summaryTableColumnClass" }
               .dropdown.inline.js-ca-dropdown
                 %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
                   %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}