Avoid dropdown menu to be truncated inside a column with scrolling

ChangeLog

@@ -16,6 +16,7 @@ Bug fixes:
 
 * Fix typo in template that prevent the Gitlab oauth link to be displayed
 * Fix Markdown preview links focus
+* Avoid dropdown menu to be truncated inside a column with scrolling
 
 Version 1.0.18
 --------------

assets/css/src/dropdown.css

@@ -10,9 +10,8 @@
 ul.dropdown-submenu-open {
     display: block;
     position: absolute;
-    left: 0;
     z-index: 1000;
-    min-width: 280px;
+    min-width: 285px;
     list-style: none;
     margin: 3px 0 0 1px;
     padding: 6px 0;
@@ -22,21 +21,19 @@ ul.dropdown-submenu-open {
     box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
 }
 
-ul.dropdown-submenu-top {
-    bottom: 0;
-}
-
 .dropdown-submenu-open li {
     display: block;
+    margin: 0;
     padding: 0;
     padding-left: 10px;
     padding-right: 10px;
-    margin: 0;
-    line-height: 30px;
+    line-height: 33px;
+    font-size: 0.85em;
+    border-bottom: 1px solid #f8f8f8;
 }
 
-.dropdown-submenu-open a {
-    font-weight: normal;
+.dropdown-submenu-open li:last-child {
+    border: none;
 }
 
 .page-header .dropdown {

assets/js/src/Dropdown.js

@@ -11,26 +11,31 @@ Dropdown.prototype.listen = function() {
     $(document).on('click', '.dropdown-menu', function(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
+        self.close();
 
         var submenu = $(this).next('ul');
         var submenuHeight = 240;
+        var offset = $(this).offset();
+        var height = $(this).height();
 
-        if (! submenu.is(':visible')) {
-            self.close();
+        // Clone the submenu outside of the column to avoid clipping issue with overflow
+        $("body").append(jQuery("<div>", {"id": "dropdown"}));
+        submenu.clone().appendTo("#dropdown");
 
-            if ($(this).offset().top + submenuHeight - $(window).scrollTop() > $(window).height()) {
-                submenu.addClass('dropdown-submenu-open dropdown-submenu-top');
-            }
-            else {
-                submenu.addClass('dropdown-submenu-open');
-            }
+        var clone = $("#dropdown ul");
+        clone.css('left', offset.left);
+
+        if (offset.top + submenuHeight - $(window).scrollTop() > $(window).height()) {
+            clone.css('top', offset.top - submenuHeight - height);
         }
         else {
-            self.close();
+            clone.css('top', offset.top + height);
         }
+
+        clone.addClass('dropdown-submenu-open');
     });
 };
 
 Dropdown.prototype.close = function() {
-    $('.dropdown-submenu-open').removeClass('dropdown-submenu-open');
+    $("#dropdown").remove();
 };