[Django] #34095: Form controls in admin should use heights in relative units
Django
-----------------------------------------+-------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.1
Severity: Normal | Keywords: accessibility
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 1
UI/UX: 1 |
-----------------------------------------+-------------------------------
There are a lot of form controls in the admin that use hard-coded heights
in pixels. This is problematic for users which change the font size, as
the text then overflows / the UI looks broken.
Here are three in particular that fit neatly in a screenshot:
- The search field’s input height
- The actions’ select
- The "Go" button
In all three cases, the fix is as simple as converting the height from
pixels to rem (divide by 16).
--
Ticket URL: <https://code.djangoproject.com/ticket/34095>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.1
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Thibaud Colas):
* Attachment "Screenshot 2022-10-13 at 17.58.12.png" added.
Django
-------------------------------+--------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+--------------------------------------
Old description:
> There are a lot of form controls in the admin that use hard-coded heights
> in pixels. This is problematic for users which change the font size, as
> the text then overflows / the UI looks broken.
>
> Here are three in particular that fit neatly in a screenshot:
>
> - The search field’s input height
> - The actions’ select
> - The "Go" button
>
> In all three cases, the fix is as simple as converting the height from
> pixels to rem (divide by 16).
New description:
There are a lot of form controls in the admin that use hard-coded heights
in pixels. This is problematic for users which change the font size, as
the text then overflows / the UI looks broken.
Here are three in particular that fit neatly in a screenshot:
https://code.djangoproject.com/raw-
attachment/ticket/34095/Screenshot%202022-10-13%20at%2017.58.12.png
- The search field’s input height
- The actions’ select
- The "Go" button
In all three cases, the fix is as simple as converting the height from
pixels to rem (divide by 16).
--
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:1>
Django
-------------------------------+--------------------------------------
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+--------------------------------------
* owner: nobody => gripfx
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:2>
Django
-------------------------------+------------------------------------
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
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/34095#comment:3>
Django
-------------------------------+------------------------------------
Reporter: Thibaud Colas | Owner: jer
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+------------------------------------
Changes (by Mariusz Felisiak):
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/16180 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:4>
Django
-------------------------------+------------------------------------
Reporter: Thibaud Colas | Owner: jer
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+------------------------------------
Changes (by Mariusz Felisiak):
* needs_better_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:5>
Django
-------------------------------+------------------------------------
Reporter: Thibaud Colas | Owner: jer
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 1 | UI/UX: 1
-------------------------------+------------------------------------
Comment (by GitHub <noreply@…>):
In [changeset:"5a7f3213ae4a2dc5e962ae1fcdedc6e6ab68dfcd" 5a7f321]:
{{{
#!CommitTicketReference repository=""
revision="5a7f3213ae4a2dc5e962ae1fcdedc6e6ab68dfcd"
Refs #34095 -- Changed height of form controls to use rem units in admin.
Co-authored-by: ja <j...@ja.com>
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:6>
Django
-------------------------------+------------------------------------
Reporter: Thibaud Colas | Owner: jer
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+------------------------------------
* needs_better_patch: 1 => 0
* has_patch: 1 => 0
Comment:
There are still
[https://github.com/django/django/pull/16180#issuecomment-1278514250 more
cases to fix], see Thibaud's comment:
> ''"Basically anything that contains text and has a height, max-height or
line-height set in pixels is suspect."''
>
> ''"Here is a regex that identifies what to review: (max-height|height
|line-height):.+px. Then for each of the definitions this identifies, we
need to find the corresponding part of the UI, and check whether it makes
sense for it to scale with the font size (if so – convert to `rem). Or
whether it better stay at the fixed size."''
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:7>
Django
Reporter: Thibaud Colas | Owner: SwastikTripathi
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by SwastikTripathi):
* owner: jer => SwastikTripathi
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:8>
Django
Reporter: Thibaud Colas | Owner:
| SwastikTripathi
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Mariusz Felisiak):
* has_patch: 0 => 1
* stage: Accepted => Ready for checkin
Comment:
[https://github.com/django/django/pull/16318 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:9>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner:
| SwastikTripathi
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Mariusz Felisiak <felisiak.mariusz@…>):
In [changeset:"e20fd899be87cf70ed5c4372c7b2ee634da1453a" e20fd899]:
{{{
#!CommitTicketReference repository=""
revision="e20fd899be87cf70ed5c4372c7b2ee634da1453a"
Refs #34095 -- Changed more properties to use rem units in admin CSS.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:10>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner:
| SwastikTripathi
Component: contrib.admin | Version: 4.1
Severity: Normal | Resolution: fixed
Keywords: accessibility | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
IMO we can consider this ticket as generally fixed. Small related cleanups
are of course still welcome.
--
Ticket URL: <https://code.djangoproject.com/ticket/34095#comment:11>