fix(dropdown): very short menu had wrong order specificity

The very short size variation did not work. It was always overridden by the short variation because both share same specificity, thus the declaration order matters.

Author: lubber-de

src/definitions/modules/dropdown.less

@@ -448,12 +448,12 @@ select.ui.dropdown {
 
   @media only screen and (max-width : @largestMobileScreen) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionMobileMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionMobileMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionMobileMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionMobileMaxMenuHeight;
@@ -469,12 +469,12 @@ select.ui.dropdown {
   }
   @media only screen and (min-width: @tabletBreakpoint) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionTabletMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionTabletMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionTabletMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionTabletMaxMenuHeight;
@@ -490,12 +490,12 @@ select.ui.dropdown {
   }
   @media only screen and (min-width: @computerBreakpoint) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionComputerMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionComputerMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionComputerMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionComputerMaxMenuHeight;
@@ -511,12 +511,12 @@ select.ui.dropdown {
   }
   @media only screen and (min-width: @widescreenMonitorBreakpoint) {
     & when (@variationDropdownShort) {
-      .ui.selection.dropdown[class*="very short"] .menu {
-        max-height: @selectionWidescreenMaxMenuHeight * 0.5;
-      }
       .ui.selection.dropdown.short .menu {
         max-height: @selectionWidescreenMaxMenuHeight * 0.75;
       }
+      .ui.selection.dropdown[class*="very short"] .menu {
+        max-height: @selectionWidescreenMaxMenuHeight * 0.5;
+      }
     }
     .ui.selection.dropdown .menu {
       max-height: @selectionWidescreenMaxMenuHeight;