Fix search form button overlap

[CirnoT]

Fixes #11832

Introduced by #11385

I have no idea why the input was originally in it own div element

[silverwind]

I just concluded this as a fomantic bug and came up with this fix (.search-column is a class added on the parent .column):

.search-column .ui.input input {
    width: auto !important;
}

[CirnoT]

Unsure if it's considered bug or just improper usage of nesting, I'd lean towards latter tho.

[CirnoT]

For what it's worth my PR also fixes the alignment issue which was also introduced by linked PR (as it seems that Fomantic no longer calculated whole size of input and button but only input)

[CirnoT]

The change makes search bar smaller due to that but that matches behavior from 1.11 before bug was introduced.

[silverwind]

The fomantic docs do recommend a parent for input with action:

<div class="ui action input">
  <input type="text" placeholder="Search...">
  <button class="ui button">Search</button>
</div>

[CirnoT]

And it is in one

<div class="ui search fluid action input">

But one of input elements and button were nested twice.

[silverwind]

Ah, I see, so the double parent was what's causing the issue.

[techknowlogick]

ping LG-TM

[silverwind]

Should backport this.

[lafriks]

please send backport