diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9637d26e56d58103164bb369cb479f6b2c978e97..d3862df20d397cc3a995808e95442a8ccbfc7b09 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -597,7 +597,7 @@
 }
 
 // Dropdown button in mini pipeline graph
-.mini-pipeline-graph-dropdown-toggle {
+button.mini-pipeline-graph-dropdown-toggle {
   border-radius: 100px;
   background-color: $white-light;
   border-width: 1px;
@@ -608,6 +608,7 @@
   padding: 0;
   transition: all 0.2s linear;
   position: relative;
+  vertical-align: middle;
 
   > .fa.fa-caret-down {
     position: absolute;
diff --git a/changelogs/unreleased/2971-multiproject-grah-ce-port.yml b/changelogs/unreleased/2971-multiproject-grah-ce-port.yml
new file mode 100644
index 0000000000000000000000000000000000000000..37584cac6aba79a15fa50f2e20c8737a612257e1
--- /dev/null
+++ b/changelogs/unreleased/2971-multiproject-grah-ce-port.yml
@@ -0,0 +1,4 @@
+---
+title: Fix vertical alignment in firefox and safari for pipeline mini graph
+merge_request:
+author: