Make time window links take up full dropdown width

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -1,12 +1,5 @@
 <script>
-import {
+import { GlButton, GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui';
-  GlButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlModal,
-  GlModalDirective,
-  GlLink,
-} from '@gitlab/ui';
 import _ from 'underscore';
 import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
@@ -31,7 +24,6 @@ export default {
     GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlLink,
     GlModal,
   },
   directives: {
@@ -255,7 +247,9 @@ export default {
               v-for="(value, key) in timeWindows"
               :key="key"
               :active="activeTimeWindow(key)"
-              ><gl-link :href="setTimeWindowParameter(key)">{{ value }}</gl-link></gl-dropdown-item
+              :href="setTimeWindowParameter(key)"
+              active-class="active"
+              >{{ value }}</gl-dropdown-item
             >
           </gl-dropdown>
         </div>

changelogs/unreleased/62300-target-area-for-dropdown-list-items-is-too-small-on-metrics-dashboard.yml

@@ -0,0 +1,5 @@
+---
+title: Enlarge metrics time-window dropdown links
+merge_request: 29458
+author:
+type: fixed

spec/javascripts/monitoring/dashboard_spec.js

@@ -314,9 +314,7 @@ describe('Dashboard', () => {
       });
 
       setTimeout(() => {
-        const selectedTimeWindow = component.$el.querySelector(
+        const selectedTimeWindow = component.$el.querySelector('.js-time-window-dropdown .active');
-          '.js-time-window-dropdown [active="true"]',
-        );
 
         expect(selectedTimeWindow.textContent.trim()).toEqual('30 minutes');
         done();