Fix scrolling dropdown not to depend on a minimum width, calculate padding with scrollbar

src/definitions/modules/dropdown.less

@@ -1014,27 +1014,36 @@ select.ui.dropdown {
 ---------------*/
 
 /*  Selection Menu */
+.ui.scrolling.dropdown .menu,
+.ui.dropdown .scrolling.menu {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .ui.scrolling.dropdown .menu {
   overflow-x: hidden;
   overflow-y: auto;
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
-  min-width: @scrollingMinWidth !important;
+  width: @scrollingMenuWidth !important;
 }
 
 .ui.dropdown .scrolling.menu {
   position: static;
-  overflow: auto;
-  min-width: @scrollingMinWidth !important;
+  overflow-y: auto;
+  border: none;
   box-shadow: none !important;
-  margin: 0 !important;
   border-radius: 0 !important;
-  border: none;
-  border-top: 1px solid @menuBorderColor;
+  margin: 0 !important;
+  width: @scrollingMenuWidth !important;
+  border-top: @menuBorder;
 }
-.ui.dropdown .scrolling.menu .item {
+.ui.scrolling.dropdown .menu .item.item.item,
+.ui.dropdown .scrolling.menu > .item.item.item {
   border-top: @scrollingMenuItemBorder;
+  padding-right: @scrollingMenuRightItemPadding !important;
 }
+.ui.scrolling.dropdown .menu .item:first-child,
 .ui.dropdown .scrolling.menu .item:first-child {
   border-top: none;
 }

src/themes/default/globals/site.variables

@@ -411,7 +411,7 @@
 @defaultInputLineHeight: 1.2142em;
 
 /* Rendered Scrollbar Width */
-@scrollbarWidth: 15px;
+@scrollbarWidth: 17px;
 
 /* Maximum Single Character Glyph Width, aka Capital "W" */
 @glyphWidth: 1.1em;

src/themes/default/modules/dropdown.variables

@@ -306,8 +306,9 @@
 --------------------*/
 
 /* Scrolling */
-@scrollingMinWidth: 15em;
-@scrollingMenuItemBorder: @selectionItemDivider;
+@scrollingMenuWidth: 100%;
+@scrollingMenuItemBorder: none;
+@scrollingMenuRightItemPadding: ~"calc("(@itemHorizontalPadding)~" + "(@scrollbarWidth)~")";
 
 @scrollingMobileMaxItems: 4;
 @scrollingTabletMaxItems: 6;