Merge pull request #4399 from sg00dwin/monitoring-dashboards-dropdown…

…-issues Bug 1805835: Changes to monitoring dashboard dropdown behavior
openshift · Feb 21, 2020 · 2e4e857 · 2e4e857
2 parents 6fdabab + 37106dc
commit 2e4e857
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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}