Form controls in admin should use heights in relative units

[Thibaud Colas]

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).

[Mariusz Felisiak]

​PR

[GitHub <noreply@…>]

In 5a7f321:

Refs #34095 -- Changed height of form controls to use rem units in admin.

Co-authored-by: ja <ja@…>

[Mariusz Felisiak]

There are still ​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."

[Mariusz Felisiak]

​PR

[Mariusz Felisiak <felisiak.mariusz@…>]

In e20fd899:

Refs #34095 -- Changed more properties to use rem units in admin CSS.

[Mariusz Felisiak]

IMO we can consider this ticket as generally fixed. Small related cleanups are of course still welcome.