[Django] #34039: Admin search bar is too small to use on small screens
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: | Version: 4.0
contrib.admin | Keywords: mobile, cross-
Severity: Normal | browser
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 1
UI/UX: 1 |
-------------------------------------+-------------------------------------
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
[https://github.com/django/django/blame/1674c70525bc370132a1db27617e468081920d11/django/contrib/admin/static/admin/css/responsive.css#L112
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34039>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Unreviewed => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner:
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => clytaemnestra
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:2>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* Attachment "Screenshot Search field OK.png" added.
Search field working
--
Ticket URL: <https://code.djangoproject.com/ticket/34039>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Hugo Herter):
* Attachment "Screenshot Search field bug.png" added.
Search field buggy
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Mia Bajić):
Added [https://github.com/django/django/pull/16091 PR].
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* has_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Hugo Herter):
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:5>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
Comment:
Thanks for this patch, however we should stretch the entire block only the
search bar.
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Mia Bajić):
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
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Wiktor):
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Syed Sajjad Hussain Shah):
Hi, how can i reproduce this isse?
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:9>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner:
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: Mia Bajić => siddheshgarud
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:10>
Django
-------------------------------------+-------------------------------------
| Garud
Type: Bug | Status: closed
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution: fixed
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
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
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:11>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Sdidhesh
| Garud
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: closed => new
* resolution: fixed =>
Comment:
This ticket is not fixed, and PR16091 was closed without being merged.
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:12>
Django
-------------------------------------+-------------------------------------
| Bisht
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: Sdidhesh Garud => Ayush Bisht
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:13>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Ayush
| Bisht
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Ayush Bisht):
Hey, can anyone please help me to reproduce this issue.. I'm not getting
this issue..
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:14>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Ayush
| Bisht
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Tim Graham):
I also cannot reproduce on Firefox and Chrome. Perhaps other browsers are
affected?
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:15>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Ayush
| Bisht
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by grey.fenrir):
Chrome 111.0.5563.146, Firefox 111.0.1 work like a charm for 800 & 1024.
Shouldn't we close the ticket?
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:16>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Ayush
| Bisht
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution: fixed
Keywords: mobile, cross- | Triage Stage: Accepted
browser |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* needs_better_patch: 1 => 0
* has_patch: 1 => 0
* resolution: => fixed
Comment:
I cannot reproduce it anymore. Closing as fixed, unless someone can
provide a reproducible scenario.
--
Ticket URL: <https://code.djangoproject.com/ticket/34039#comment:17>