Define dashboard dropdowns layout in flex

Ensure the metric dashboard filter bar dropdowns and buttons are
consistent in their width, and scale well on different screen sizes

- Removed column layout and used flex instead
- Fixed an issue with the dropdown tooltip
- Tested on mobile and tablet as well as desktop

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -158,7 +158,7 @@ export default {
 <template>
   <tooltip-on-truncate
     :title="timeWindowText"
-    :truncate-target="elem => elem.querySelector('.date-time-picker-toggle')"
+    :truncate-target="elem => elem.querySelector('.gl-dropdown-toggle-text')"
     placement="top"
     class="d-inline-block"
   >

app/assets/stylesheets/pages/prometheus.scss

@@ -64,6 +64,12 @@
       padding: $gl-padding-8 $gl-padding-12;
     }
   }
+
+  .show-last-dropdown {
+    // same as in .dropdown-menu-toggle
+    // see app/assets/stylesheets/framework/dropdowns.scss
+    width: 160px;
+  }
 }
 
 .prometheus-panel {

changelogs/unreleased/202541-dashboard-filters-should-scale-different-screens.yml

+---
+title: Define dashboard dropdowns layout in flex to improve support smaller screens
+merge_request: 29477
+author:
+type: changed

locale/gitlab.pot

@@ -12964,9 +12964,6 @@ msgid_plural "Metrics|Edit metrics"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "Metrics|Environment"
-msgstr ""
-
 msgid "Metrics|For grouping similar metrics"
 msgstr ""
 
@@ -13000,9 +12997,6 @@ msgstr ""
 msgid "Metrics|Refresh dashboard"
 msgstr ""
 
-msgid "Metrics|Show last"
-msgstr ""
-
 msgid "Metrics|There was an error creating the dashboard."
 msgstr ""
 

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -6,101 +6,106 @@ exports[`Dashboard template matches the default snapshot 1`] = `
   data-qa-selector="prometheus_graphs"
 >
   <div
-    class="prometheus-graphs-header gl-p-3 pb-0 border-bottom bg-gray-light"
+    class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
   >
     <div
-      class="row"
+      class="mb-2 pr-2 d-flex d-sm-block"
     >
-      <gl-form-group-stub
-        class="col-sm-12 col-md-6 col-lg-2"
-        label="Dashboard"
-        label-for="monitor-dashboards-dropdown"
-        label-size="sm"
-      >
-        <dashboards-dropdown-stub
-          class="mb-0 d-flex"
-          data-qa-selector="dashboards_filter_dropdown"
-          defaultbranch="master"
-          id="monitor-dashboards-dropdown"
-          selecteddashboard="[object Object]"
-          toggle-class="dropdown-menu-toggle"
-        />
-      </gl-form-group-stub>
-       
-      <gl-form-group-stub
-        class="col-sm-6 col-md-6 col-lg-2"
-        label="Environment"
-        label-for="monitor-environments-dropdown"
-        label-size="sm"
+      <dashboards-dropdown-stub
+        class="flex-grow-1"
+        data-qa-selector="dashboards_filter_dropdown"
+        defaultbranch="master"
+        id="monitor-dashboards-dropdown"
+        selecteddashboard="[object Object]"
+        toggle-class="dropdown-menu-toggle"
+      />
+    </div>
+     
+    <div
+      class="mb-2 pr-2 d-flex d-sm-block"
+    >
+      <gl-dropdown-stub
+        class="flex-grow-1"
+        data-qa-selector="environments_dropdown"
+        id="monitor-environments-dropdown"
+        menu-class="monitor-environment-dropdown-menu"
+        text="production"
+        toggle-class="dropdown-menu-toggle"
       >
-        <gl-dropdown-stub
-          class="mb-0 d-flex"
-          data-qa-selector="environments_dropdown"
-          id="monitor-environments-dropdown"
-          menu-class="monitor-environment-dropdown-menu"
-          text="production"
-          toggle-class="dropdown-menu-toggle"
+        <div
+          class="d-flex flex-column overflow-hidden"
         >
+          <gl-dropdown-header-stub
+            class="monitor-environment-dropdown-header text-center"
+          >
+            
+            Environment
+          
+          </gl-dropdown-header-stub>
+           
+          <gl-dropdown-divider-stub />
+           
+          <gl-search-box-by-type-stub
+            class="m-2"
+            clearbuttontitle="Clear"
+            value=""
+          />
+           
+          <div
+            class="flex-fill overflow-auto"
+          />
+           
           <div
-            class="d-flex flex-column overflow-hidden"
+            class="text-secondary no-matches-message"
           >
-            <gl-dropdown-header-stub
-              class="monitor-environment-dropdown-header text-center"
-            >
-              Environment
-            </gl-dropdown-header-stub>
-             
-            <gl-dropdown-divider-stub />
-             
-            <gl-search-box-by-type-stub
-              class="m-2"
-              clearbuttontitle="Clear"
-              value=""
-            />
-             
-            <div
-              class="flex-fill overflow-auto"
-            />
-             
-            <div
-              class="text-secondary no-matches-message"
-            >
-              
-              No matching results
             
-            </div>
+            No matching results
+          
           </div>
-        </gl-dropdown-stub>
-      </gl-form-group-stub>
-       
-      <gl-form-group-stub
-        class="col-sm-auto col-md-auto col-lg-auto"
+        </div>
+      </gl-dropdown-stub>
+    </div>
+     
+    <div
+      class="mb-2 pr-2 d-flex d-sm-block"
+    >
+      <date-time-picker-stub
+        class="flex-grow-1 show-last-dropdown"
+        customenabled="true"
         data-qa-selector="show_last_dropdown"
-        label="Show last"
-        label-for="monitor-time-window-dropdown"
-        label-size="sm"
+        options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        value="[object Object]"
+      />
+    </div>
+     
+    <div
+      class="mb-2 pr-2 d-flex d-sm-block"
+    >
+      <gl-deprecated-button-stub
+        class="flex-grow-1"
+        size="md"
+        title="Refresh dashboard"
+        variant="default"
       >
-        <date-time-picker-stub
-          customenabled="true"
-          options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-          value="[object Object]"
+        <icon-stub
+          name="retry"
+          size="16"
         />
-      </gl-form-group-stub>
+      </gl-deprecated-button-stub>
+    </div>
+     
+    <div
+      class="flex-grow-1"
+    />
+     
+    <div
+      class="d-sm-flex"
+    >
+      <!---->
        
-      <gl-form-group-stub
-        class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button"
-      >
-        <gl-deprecated-button-stub
-          size="md"
-          title="Refresh dashboard"
-          variant="default"
-        >
-          <icon-stub
-            name="retry"
-            size="16"
-          />
-        </gl-deprecated-button-stub>
-      </gl-form-group-stub>
+      <!---->
+       
+      <!---->
        
       <!---->
     </div>