Merge branch '37297-monitor-dashboard-dropdown-controls-caret-icon-is-misaligned' into 'master'

Fix gl-dropdown component's caret alignment

See merge request gitlab-org/gitlab!24273

app/assets/stylesheets/framework/dropdowns.scss

@@ -158,6 +158,27 @@
   }
 }
 
+// Temporary hack until `gitlab-ui` issue is fixed.
+// https://gitlab.com/gitlab-org/gitlab-ui/issues/164
+.gl-dropdown .dropdown-menu-toggle {
+  .gl-dropdown-caret {
+    position: absolute;
+    right: $gl-padding-8;
+    top: $gl-padding-8;
+  }
+
+  // Add some child to the button so that the default height kicks in
+  // when there's no text (since the caret is now aboslute)
+  &::after {
+    border: 0;
+    content: ' ';
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+}
+
 @mixin dropdown-item-hover {
   background-color: $gray-darker;
   color: $gl-text-color;

changelogs/unreleased/37297-monitor-dashboard-dropdown-controls-caret-icon-is-misaligned.yml

+---
+title: Fix dropdown caret not being positioned correctly
+merge_request: 24273
+author:
+type: fixed