Keep the listing search box on one line as a field widget

[ramonski]

Description of the issue/feature this PR addresses

A listing used as a field widget renders inside form[name="edit_form"], and forms.scss forces every input and select in there to the full width of its cell:

form[name='edit_form'] div.listing-container {
    input, select {
        @extend .form-control;
        width: 100%!important;
    }
}

That is right for a result field in a cell and wrong for the listing's own search box, which is a Bootstrap input-group. An input-group only lays out on one line because Bootstrap sizes the field inside it with width: 1% and lets flex-grow hand it the leftover space. The !important above wins, the field claims the whole row, and the saved filters button and the two search buttons wrap onto lines of their own.

Current behavior before PR

Measured on the Specifications field of an analysis specification, in a 314px wide container:

element	width	top
input-group-prepend	32px	797
form-control	314px	812
input-group-append	63px	843

Three rows, 77px tall.

Desired behavior after PR is merged

element	width	top
input-group-prepend	32px	798
form-control	221px	798
input-group-append	63px	798

One row, 31px tall.

Implementation

A counter-rule for the fields inside an input-group, which is a row by construction:

    .input-group > input,
    .input-group > select {
        width: 1%!important;
    }
}

Nothing else is touched: an input that is not inside an input-group still fills its cell.

Verification

Measured in the browser before and after, on the Specifications field shown above. The screenshots come from a training dataset.

Affects every listing used as a field widget: analysis specifications, the services of an analysis profile, the services of a sample template, the layout of a worksheet template.

--
I confirm I have tested this PR thoroughly and coded it according to PEP8
and Plone's Python styleguide standards.