[form] wrong margin-bottom on unstackable fields group

[prudho]

Bug Report

Form unstackable fields has a wrong margin-bottom when reaching the mobile breakpoint.

I suspect this line to be the culprit.

Steps to reproduce

1. Go to this JSFiddle.
2. Take a look at the margin between Field 1 and Field 3.
3. Resize the window < 768px to trigger the mobile breakpoint.
4. The margin between Field 1 and Field 3 isn't the same.

Expected result

Actual result

Testcase

JSFiddle

Version

2.9.2

[lubber-de]

This line is the reason https://github.com/fomantic/Fomantic-UI/blob/de758dcb3b4b51657623d43893bc5351aadaf942/src/definitions/collections/form.less#L996

It was brought up to SUI already six years ago. https://github.com/Semantic-Org/Semantic-UI/issues/5056#issuecomment-458749496

Just removing it would work for your example, but the original SUI issuer proposed a selector change instead

  .ui.form .fields > .fields,
  .ui.form .fields > .field,

Needs more investigation especially for nested form fields where i expect the reason behind the zero bottom margin

[ko2in]

I found the reason why the fields got zero margin in mobile screen. The fields contain several child field which has zero bottom margin, and they display in columns next to each in wider screen, but they turn into row layout with bottom margin to have space between them in smaller screen.

So, the parent fields container margin adds double space to the other sibling fields.

Here's the fiddle https://jsfiddle.net/ko2in/bgxzahf2/

[ko2in]

I think it should fix by:

.ui.form .fields:not(.unstackable) {
  flex-wrap: wrap;
  margin-bottom: 0;
}

[lubber-de]

But isn't this already set on mobile devices? (yes the ' :not(.unstackable)' is missing, but if unstackable isn't set by default... it's already there, ...what am i missing?

https://github.com/fomantic/Fomantic-UI/blob/de758dcb3b4b51657623d43893bc5351aadaf942/src/definitions/collections/form.less#L993C1-L995C1