fix(form): adjust margin for field groups on mobile view

A field inside fields groups had a wrong bottom margin to the next field (or its labels) on mobile view . 

The whole mobile view adjustment could be implemented much easier which, as a result, fixed the main issue automatically. It also fixes a rare situation when one wide field is used

That said, this PR removes the !important from the fields width allowing for simpler override in media query because of higher specificity

Author: lubber-de

src/definitions/collections/form.less

@@ -924,29 +924,12 @@
 @media only screen and (max-width : @largestMobileScreen) {
   .ui.form .fields {
     flex-wrap: wrap;
+    margin-bottom: 0;
   }
 
-  .ui[class*="equal width"].form:not(.unstackable) .fields > .field,
-  .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field {
-    width: @oneColumn !important;
+  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
+  .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
+    width: @oneColumn;
     margin: 0 0 @rowDistance;
   }
 }
@@ -960,85 +943,54 @@
 }
 
 .ui.form .one.wide.field {
-  width: @oneWide !important;
+  width: @oneWide;
 }
 .ui.form .two.wide.field {
-  width: @twoWide !important;
+  width: @twoWide;
 }
 .ui.form .three.wide.field {
-  width: @threeWide !important;
+  width: @threeWide;
 }
 .ui.form .four.wide.field {
-  width: @fourWide !important;
+  width: @fourWide;
 }
 .ui.form .five.wide.field {
-  width: @fiveWide !important;
+  width: @fiveWide;
 }
 .ui.form .six.wide.field {
-  width: @sixWide !important;
+  width: @sixWide;
 }
 .ui.form .seven.wide.field {
-  width: @sevenWide !important;
+  width: @sevenWide;
 }
 .ui.form .eight.wide.field {
-  width: @eightWide !important;
+  width: @eightWide;
 }
 .ui.form .nine.wide.field {
-  width: @nineWide !important;
+  width: @nineWide;
 }
 .ui.form .ten.wide.field {
-  width: @tenWide !important;
+  width: @tenWide;
 }
 .ui.form .eleven.wide.field {
-  width: @elevenWide !important;
+  width: @elevenWide;
 }
 .ui.form .twelve.wide.field {
-  width: @twelveWide !important;
+  width: @twelveWide;
 }
 .ui.form .thirteen.wide.field {
-  width: @thirteenWide !important;
+  width: @thirteenWide;
 }
 .ui.form .fourteen.wide.field {
-  width: @fourteenWide !important;
+  width: @fourteenWide;
 }
 .ui.form .fifteen.wide.field {
-  width: @fifteenWide !important;
+  width: @fifteenWide;
 }
 .ui.form .sixteen.wide.field {
-  width: @sixteenWide !important;
+  width: @sixteenWide;
 }
 
-/* Swap to full width on mobile */
-@media only screen and (max-width : @largestMobileScreen) {
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field {
-    width: @oneColumn !important;
-  }
-  .ui.form .fields {
-    margin-bottom: 0;
-  }
-}
 
 /*--------------------
      Equal Width