From 43182aeeba80e9f0626dbc1f0668632310a30fb9 Mon Sep 17 00:00:00 2001
From: Dhiraj Bodicherla <dhiraj@gitlab.com>
Date: Mon, 8 Jul 2019 12:34:54 -0700
Subject: Adjust graph header height in monitor dashboard

This is CE backport for 11782 to keep styling in monitor dashboard
consistent
---
 .../javascripts/monitoring/components/dashboard.vue  | 20 ++++++++++----------
 app/assets/stylesheets/pages/prometheus.scss         |  3 +--
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index d330ceb836c..e78f0e01105 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -475,18 +475,10 @@ export default {
             :project-path="projectPath"
             group-id="monitor-time-series-chart"
           >
-            <div class="d-flex align-items-center">
-              <alert-widget
-                v-if="alertWidgetAvailable && graphData"
-                :modal-id="`alert-modal-${index}-${graphIndex}`"
-                :alerts-endpoint="alertsEndpoint"
-                :relevant-queries="graphData.queries"
-                :alerts-to-manage="getGraphAlerts(graphData.queries)"
-                @setAlerts="setAlerts"
-              />
+            <div class="d-flex flex-column prepend-right-32">
               <gl-dropdown
                 v-gl-tooltip
-                class="mx-2"
+                class="align-self-end"
                 toggle-class="btn btn-transparent border-0"
                 :right="true"
                 :no-caret="true"
@@ -514,6 +506,14 @@ export default {
                   {{ __('Alerts') }}
                 </gl-dropdown-item>
               </gl-dropdown>
+              <alert-widget
+                v-if="alertWidgetAvailable && graphData"
+                :modal-id="`alert-modal-${index}-${graphIndex}`"
+                :alerts-endpoint="alertsEndpoint"
+                :relevant-queries="graphData.queries"
+                :alerts-to-manage="getGraphAlerts(graphData.queries)"
+                @setAlerts="setAlerts"
+              />
             </div>
           </monitor-time-series-chart>
         </template>
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index 72f1b5307ec..aa042d1627d 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -36,9 +36,8 @@
 
 .prometheus-graph-header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-bottom: $gl-padding-8;
+  height: 53px;
 
   h5 {
     font-size: $gl-font-size-large;
-- 
cgit v1.2.1