Admin search input on small widths is too small with selected list filter

[Timothy Schilling]

The search input shrinks down to an unusable level when the window's width is too small. This only occurs when there's a selected list filter causing the 10 results (100 total) span to appear. This should be reproducible from the admin where there's a search field and a list filter selected. Simply make the window skinny.

I've only tested this on FF on Ubuntu, but my colleague reported it with Chrome.

I've confirmed a fix in contrib/admin/css/responsive.css by changing the following style:

    #changelist-search .quiet {
        width: 100%;
        margin: 5px 0 0 25px;
    }

to

    #changelist-search .quiet {
        flex: 1 0 auto;
        width: 0;
        margin: 5px 0 0 25px;
    }

This matches the #searchbar style above it.

You can see the problem in my screenshots. The immediate resolution for users is to make the window slightly larger.

I will be creating a PR for this shortly.

[Timothy Schilling]

View showing the search input as too small with a skinny window.

[Timothy Schilling]

View showing the search input with a slightly wider window.

[Timothy Schilling]

PR on github: ​https://github.com/django/django/pull/13517

[Mariusz Felisiak]

Great catch, thanks.

Regression in 8ee4bb6ffcb3346c0fa8fb194986fbf9edadc822.

[Mariusz Felisiak <felisiak.mariusz@…>]

In b7da588:

Fixed #32091 -- Fixed admin search bar width on filtered admin page.

[Mariusz Felisiak <felisiak.mariusz@…>]

In 4047c160:

[3.1.x] Fixed #32091 -- Fixed admin search bar width on filtered admin page.

Backport of b7da588e883e12b8ac3bb8a486e654e30fc1c6c8 from master