Opened 2 years ago

Closed 19 months ago

#34039 closed Bug (fixed)

Admin search bar is too small to use on small screens

Reported by: Thibaud Colas Owned by: Ayush Bisht
Component: contrib.admin Version: 4.0
Severity: Normal Keywords: mobile, cross-browser
Cc: Triage Stage: Accepted
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description

For screen widths below 1024px, the search bar gets resized to a width of 12px, which isn’t usable. This seems to be due to an override in `responsive.css`. This has been in place for a while so I’m not sure why this wouldn’t have been noticed sooner, there might be more to it.

Attachments (2)

Screenshot Search field OK.png (80.0 KB ) - added by Hugo Herter 2 years ago.
Search field working
Screenshot Search field bug.png (80.6 KB ) - added by Hugo Herter 2 years ago.
Search field buggy

Download all attachments as: .zip

Change History (19)

comment:1 by Mariusz Felisiak, 2 years ago

Triage Stage: UnreviewedAccepted

comment:2 by Mia Bajić, 2 years ago

Owner: changed from nobody to Mia Bajić
Status: newassigned

by Hugo Herter, 2 years ago

Search field working

by Hugo Herter, 2 years ago

Search field buggy

comment:3 by Mia Bajić, 2 years ago

Added PR.

comment:4 by Mia Bajić, 2 years ago

Has patch: set

comment:5 by Hugo Herter, 2 years ago

The root of the issue is in the "flex" management of the component that allows it to expand outside of the screen.

Adding a min-width patches the issue on some display sizes but does not solve the core problem here.

Removing display: flex on #changelist-search > div removes the flex behaviour and the components size adequately regarding the viewport - however they are not side by side anymore.

comment:6 by Mariusz Felisiak, 2 years ago

Patch needs improvement: set

Thanks for this patch, however we should stretch the entire block only the search bar.

comment:7 by Mia Bajić, 2 years ago

We were checking it with Thibaud and we realized, it works differently on different browsers, but we're not sure why, thus not sure how to fix it.

https://github.com/thibaudcolas/django/commit/cae12ebc705c6e856d2482ef84c42b298e0887ef

comment:8 by Wiktor, 2 years ago

Looks like search bar is unusable only if there are 0 records. If one adds some records, then search bar stretches to the size of results div.

comment:9 by Syed Sajjad Hussain Shah, 21 months ago

Hi, how can i reproduce this isse?

comment:10 by Sdidhesh Garud, 20 months ago

Owner: changed from Mia Bajić to Sdidhesh Garud

comment:11 by Shiwei Chen, 20 months ago

Resolution: fixed
Status: assignedclosed

Seems like this issue has been fixed: I ran the code on my machine and the searchbar is resized correctly. It also seems like the issue was fixed for others, according to this thread: https://github.com/django/django/pull/16091

comment:12 by Mariusz Felisiak, 20 months ago

Resolution: fixed
Status: closednew

This ticket is not fixed, and PR16091 was closed without being merged.

comment:13 by Ayush Bisht, 20 months ago

Owner: changed from Sdidhesh Garud to Ayush Bisht
Status: newassigned

comment:14 by Ayush Bisht, 20 months ago

Hey, can anyone please help me to reproduce this issue.. I'm not getting this issue..

comment:15 by Tim Graham, 20 months ago

I also cannot reproduce on Firefox and Chrome. Perhaps other browsers are affected?

comment:16 by grey.fenrir, 19 months ago

Chrome 111.0.5563.146, Firefox 111.0.1 work like a charm for 800 & 1024. Shouldn't we close the ticket?

comment:17 by Mariusz Felisiak, 19 months ago

Has patch: unset
Patch needs improvement: unset
Resolution: fixed
Status: assignedclosed

I cannot reproduce it anymore. Closing as fixed, unless someone can provide a reproducible scenario.

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