Fix panel "more actions" button layout

 - fix width
 - fix horizontal alignment of icon

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

@@ -138,6 +138,11 @@ export default {
 </script>
 
 <template>
+  <!-- 
+    This component should be replaced with a variant developed
+    as part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936
+    The variant will create a dropdown with an icon, no text and no caret    
+  -->
   <gl-new-dropdown
     v-gl-tooltip
     data-testid="actions-menu"

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

@@ -394,15 +394,21 @@ export default {
         data-qa-selector="prometheus_graph_widgets"
       >
         <div data-testid="dropdown-wrapper" class="d-flex align-items-center">
+          <!-- 
+            This component should be replaced with a variant developed
+            as part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936
+            The variant will create a dropdown with an icon, no text and no caret    
+           -->
           <gl-dropdown
             v-gl-tooltip
-            toggle-class="shadow-none border-0"
+            toggle-class="gl-px-3!"
+            no-caret
             data-qa-selector="prometheus_widgets_dropdown"
             right
             :title="__('More actions')"
           >
-            <template slot="button-content">
-              <gl-icon name="ellipsis_v" class="dropdown-icon text-secondary" />
+            <template #button-content>
+              <gl-icon class="gl-mr-0!" name="ellipsis_v" />
             </template>
             <gl-dropdown-item
               v-if="expandBtnAvailable"

changelogs/unreleased/astoicescu-fix_panel_more_actions_button.yml

+---
+title: Fix panel "more actions" button layout
+merge_request: 39534
+author:
+type: fixed