Opened 21 months ago

Closed 21 months ago

Last modified 21 months ago

#32091 closed Bug (fixed)

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

Reported by: Timothy Schilling Owned by: tim-schilling
Component: contrib.admin Version: 3.1
Severity: Release blocker Keywords: css admin
Cc: Tom Carrick Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

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.

Attachments (2)

search_skinny_window.png (40.1 KB) - added by Timothy Schilling 21 months ago.
View showing the search input as too small with a skinny window.
search_wide_window.png (41.2 KB) - added by Timothy Schilling 21 months ago.
View showing the search input with a slightly wider window.

Download all attachments as: .zip

Change History (7)

Changed 21 months ago by Timothy Schilling

Attachment: search_skinny_window.png added

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

Changed 21 months ago by Timothy Schilling

Attachment: search_wide_window.png added

View showing the search input with a slightly wider window.

comment:1 Changed 21 months ago by Timothy Schilling

Component: Uncategorizedcontrib.admin
Has patch: set
Keywords: css admin added

comment:2 Changed 21 months ago by Mariusz Felisiak

Cc: Tom Carrick added
Owner: changed from nobody to tim-schilling
Severity: NormalRelease blocker
Status: newassigned
Triage Stage: UnreviewedAccepted
Type: UncategorizedBug

Great catch, thanks.

Regression in 8ee4bb6ffcb3346c0fa8fb194986fbf9edadc822.

comment:3 Changed 21 months ago by Mariusz Felisiak

Triage Stage: AcceptedReady for checkin

comment:4 Changed 21 months ago by Mariusz Felisiak <felisiak.mariusz@…>

Resolution: fixed
Status: assignedclosed

In b7da588:

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

comment:5 Changed 21 months ago by 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

Note: See TracTickets for help on using tickets.
Back to Top