Improve dropdown position on small devices

The problem: when the breadcrumb item is too close to the right side of the window, the dropdown might be partially hidden outside of the viewport.

The solution: if the width of the dropdown is greater than the space between the button and the right side of the viewport, add class "open-left" to ".dropdown-menu" and use it to change the position of the dropdown.

assets/components/molecules/breadcrumb/breadcrumb.js

@@ -2,8 +2,26 @@
 
 export default () => {
   const expandBreadcrumb = $('.btn-expand-links');
+  const breadcrumbDropToggle = $('.dropdown-toggle');
 
+  // add class 'has-expanded-links'
   expandBreadcrumb.click(function(){
     $(".breadcrumb-wrapper .breadcrumb").addClass("has-expanded-links");
   });
+
+  // improve dropdown position
+  breadcrumbDropToggle.click(function(){
+    var btnPos = $(this).offset().left;
+    var documentWitdh = $(document).width();
+    var dropdown = $(this).siblings(".dropdown-menu");
+    var dropdownWidth = dropdown.width();
+    var btnOffset = documentWitdh - btnPos;
+
+    // remove class 'open-left' from all .dropdown-menu elements
+    $(".dropdown-menu").removeClass("open-left");
+    // add the class back if the dropdown is too close to the right side of the window
+    if ( dropdownWidth > btnOffset ) {
+      dropdown.addClass("open-left");
+    }
+  });
 };

assets/components/molecules/breadcrumb/breadcrumb.scss

@@ -77,10 +77,6 @@
     display: inline;
   }
 
-  @include media-breakpoint-down(md) {
-    display: inline;
-  }
-
   &:before {
     content: ' ';
     display: block;
@@ -159,7 +155,7 @@
   .breadcrumb .breadcrumb-item.active,
   .breadcrumb .breadcrumb-item.breadcrumb-tags-wrapper,
   .breadcrumb.has-expanded-links .breadcrumb-item {
-    display: inline;
+    display: inline-block;
   }
 }
 
@@ -217,9 +213,14 @@
 .breadcrumb .dropdown-menu {
   &.show {
     // dropdown position depends on the <li>, not the button
-    top: 2rem !important;
+    top: 1.65rem !important;
     left: -0.625rem !important;
     transform: none !important;
+
+    &.open-left {
+      left: auto !important;
+      right: -0.625rem !important;
+    }
   }
 }