Adds responsive breakpoints for dropdown menu height

src/definitions/modules/dropdown.less

@@ -56,6 +56,10 @@
   background: @menuBackground;
   min-width: 100%;
 
+  overflow-y: auto;
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
+
   white-space: @menuWrap;
   font-size: 1rem;
   text-shadow: none;
@@ -69,6 +73,32 @@
   will-change: transform, opacity;
 }
 
+/*--------------
+   Responsive
+---------------*/
+
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.dropdown .menu {
+    max-height: @mobileMaxMenuHeight;
+  }
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.dropdown .menu {
+    max-height: @tabletMaxMenuHeight;
+  }
+}
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.dropdown .menu {
+    max-height: @computerMaxMenuHeight;
+  }
+}
+@media only screen and (min-width: @widescreenMonitorBreakpoint) {
+  .ui.dropdown .menu {
+    max-height: @widescreenMaxMenuHeight;
+  }
+}
+
+
 /*--------------
   Hidden Input
 ---------------*/

src/themes/packages/default/modules/dropdown.variables

@@ -47,10 +47,22 @@
 @itemVerticalPadding: 0.65rem;
 @itemHorizontalPadding: 1.25rem;
 @itemFontWeight: normal;
-@itemLineHeight: 1.2;
+@itemLineHeight: 1.2em;
 @itemTextTransform: none;
 @itemBoxShadow: none;
 
+/* Responsive */
+@itemActualHeight: (@itemVerticalPadding * 2) + @itemLineHeight;
+
+@mobileMaxItems: 6;
+@tabletMaxItems: 8;
+@computerMaxItems: 12;
+@mobileMaxMenuHeight: (@itemActualHeight * @mobileMaxItems);
+@tabletMaxMenuHeight: (@itemActualHeight * @tabletMaxItems);
+@computerMaxMenuHeight: (@itemActualHeight * @computerMaxItems);
+@widescreenMaxMenuHeight: 9999px;
+
+
 /* Menu Header */
 @menuHeaderColor: @darkTextColor;
 @menuHeaderFontSize: 0.8em;