From 37106dc3a58170f1661ae364ca0687cb310addd9 Mon Sep 17 00:00:00 2001
From: sg00dwin <sgoodwin@redhat.com>
Date: Thu, 20 Feb 2020 15:48:37 -0500
Subject: [PATCH] Changes to monitoring dashboard dropdown behavior - Enable
 time range and interval to wrap beneath <h1> - Remove set width from
 dropdowns so that long selected item text isn't agressively truncated. - and
 enable truncation at mobile widths

---
 .../public/components/monitoring/_monitoring.scss   | 13 ++++++++++++-
 .../components/monitoring/dashboards/index.tsx      | 10 ++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/public/components/monitoring/_monitoring.scss b/frontend/public/components/monitoring/_monitoring.scss
index a39ce0d4512..7aaba15a45c 100644
--- a/frontend/public/components/monitoring/_monitoring.scss
+++ b/frontend/public/components/monitoring/_monitoring.scss
@@ -3,7 +3,11 @@
 }
 
 .monitoring-dashboards__dropdown-button {
-  width: 140px;
+  max-width: 280px !important; // allow truncation
+  min-width: 100px;
+  @media (min-width: $screen-sm-min) {
+    max-width: 100% !important;
+  }
 }
 
 .monitoring-dashboards__dropdown-title {
@@ -24,6 +28,12 @@
   }
 }
 
+.monitoring-dashboards__header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 .monitoring-dashboards__options {
   display: flex;
   float: right;
@@ -78,6 +88,7 @@
 
 .monitoring-dashboards__variables {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .query-browser__toggle-graph {
diff --git a/frontend/public/components/monitoring/dashboards/index.tsx b/frontend/public/components/monitoring/dashboards/index.tsx
index 99f404da5d0..a353dbd8142 100644
--- a/frontend/public/components/monitoring/dashboards/index.tsx
+++ b/frontend/public/components/monitoring/dashboards/index.tsx
@@ -468,11 +468,13 @@ const MonitoringDashboardsPage_: React.FC<MonitoringDashboardsPageProps> = ({
         <title>Metrics Dashboards</title>
       </Helmet>
       <div className="co-m-nav-title co-m-nav-title--detail">
-        <div className="monitoring-dashboards__options">
-          <TimespanDropdown />
-          <PollIntervalDropdown />
+        <div className="monitoring-dashboards__header">
+          <h1 className="co-m-pane__heading">Dashboards</h1>
+          <div className="monitoring-dashboards__options">
+            <TimespanDropdown />
+            <PollIntervalDropdown />
+          </div>
         </div>
-        <h1 className="co-m-pane__heading">Dashboards</h1>
         <div className="monitoring-dashboards__variables">
           <VariableDropdown
             items={boardItems}