One-wide form fields do not stack properly

Author: likuilinCreated Feb 15, 2025Updated Feb 15, 2025

Forms with one-wide fields do not stack properly:

<form class="ui form">
  <div class="fields">
    <div class="one wide field">
      <label>one wide</label>
      <input type="text" value="one wide" />
    </div>
    <div class="two wide field">
      <label>two wide</label>
      <input type="text" value="two wide" />
    </div>
    <div class="three wide field">
      <label>three wide</label>
      <input type="text" value="three wide" />
    </div>
  </div>
</form>

This is because this CSS is missing the one-wide case:

https://github.com/Semantic-Org/Semantic-UI/blob/597843ab84d565cccfd8fd7719416350ae73e734/src/definitions/collections/form.less#L910-L942

  .ui.form:not(.unstackable) .fields:not(.unstackable) > .one.wide.field,

Are one-wide fields supposed to stack on mobile through some other mechanism? If not, I think the above line should be added so that they behave like all the others.

Source: Semantic-Org/Semantic-UI