Fix bootstrap pipeline right alignment

2 files changed, 4 insertions, 2 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index 7bfe11ab8cd..e64afc94ef9 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -79,12 +79,13 @@ export default {
 };
 </script>
 <template>
-  <div class="ci-job-dropdown-container dropdown">
+  <div class="ci-job-dropdown-container dropdown dropright">
     <button
       v-tooltip
       type="button"
       data-toggle="dropdown"
       data-container="body"
+      data-boundary="viewport"
       class="dropdown-menu-toggle build-content"
       :title="tooltipText"
     >
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index a40f4ea4f4b..4a4da027c92 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -87,7 +87,8 @@ table {
   display: none;
 }
 
-.dropdown-toggle::after {
+.dropdown-toggle::after,
+.dropright .dropdown-menu-toggle::after {
   // Remove bootstrap's dropdown caret
   display: none;
 }