[Django] #35404: Admin fieldset multiple flexbox regressions

[Django]

#35404: Admin fieldset multiple flexbox regressions
-------------------------------------+-------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: | Version: 5.0
contrib.admin |
Severity: Normal | Keywords: css admin fieldset
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
Hello. I have noticed a couple regressions in the admin fieldset css. I
think they are all related to switching `<div class="form-row">` to
flexbox.

1. input type=text boxes on the right side grow in height if the label
doesn't fit into 160px.

2. long labels have uncovered another issue: incorrect line height and a
forced height in general.

3. checkboxes are not aligned with their labels.
--
Ticket URL: <https://code.djangoproject.com/ticket/35404>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35404: Admin fieldset multiple flexbox regressions

------------------------------------+--------------------------------------

Reporter: minusf | Owner: nobody
Type: Bug | Status: new

Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

------------------------------------+--------------------------------------
Changes (by minusf):

* Attachment "flexbox-input.png" added.

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+--------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+--------------------------------------
Changes (by minusf):

* Attachment "long-labels-with-patch.png" added.

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+--------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+--------------------------------------
Changes (by minusf):

* Attachment "unaligned-checkbox.png" added.

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+--------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+--------------------------------------
Changes (by minusf):

* Attachment "checkbox-wo-flexbox.png" added.

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+--------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+--------------------------------------

Description changed by minusf:

Old description:

> Hello. I have noticed a couple regressions in the admin fieldset css. I
> think they are all related to switching `<div class="form-row">` to
> flexbox.
>
> 1. input type=text boxes on the right side grow in height if the label
> doesn't fit into 160px.
>
> 2. long labels have uncovered another issue: incorrect line height and a
> forced height in general.
>
> 3. checkboxes are not aligned with their labels.

New description:

Hello. I have noticed a couple regressions in the admin fieldset css. I
think they are all related to switching `<div class="form-row">` to
flexbox.

1. input type=text boxes on the right side grow in height if the label
doesn't fit into 160px.

[[Image(flexbox-input.png)]]

2. long labels have uncovered another issue: incorrect line height and a

forced height in general. After applying the following patch:

{{{#!diff
M django/contrib/admin/static/admin/css/forms.css
@@ -84,14 +84,13 @@ form ul.inline li {
min-width: 160px;
width: 160px;
word-wrap: break-word;
- line-height: 1;
+ line-height: 1.5;
}

.aligned label:not(.vCheckboxLabel):after {
content: '';
display: inline-block;
vertical-align: middle;
- height: 1.625rem;
}

.aligned label + p, .aligned .checkbox-row + div.help, .aligned label +
div.readonly {
}}}

long labels looks more readable:

[[Image(long-labels-with-patch.png)]]

3. checkboxes are not aligned with their labels. I don't have a patch for
this, only 2 screenshots:

with flexbox:

[[Image(unaligned-checkbox.png)]]

without flexbox:

[[Image(checkbox-wo-flexbox.png)]]

--
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:1>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+--------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+--------------------------------------

Changes (by Sarah Boyce):

* Attachment "image-20240425-090901.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/35404>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+--------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+--------------------------------------
Changes (by Sarah Boyce):

* Attachment "image-20240425-092610.png" added.

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------

Reporter: minusf | Owner: nobody
Type: Bug | Status: new

Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Changes (by Sarah Boyce):

* stage: Unreviewed => Accepted
* version: 5.0 => 4.2

Comment:

Thank you for the report and screenshots! Replicated 👍

For reference, this is how these examples looked on 4.1 (ignore the red
dot)
[[Image(image-20240425-090901.png)]]

1 and 3 are regressions from 96a598356a9ea8c2c05b22cadc12e256a3b295fd, 2
is a long standing issue.

Unsure what is the best option for 1, because the grow behaviour looks
better when there is help text.
Happy to receive suggestions or to default to the previous behaviour.
[[Image(image-20240425-092610.png)]]
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:2>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Comment (by minusf):

Thank your for looking into this. Interesting that for so long nobody
reported this.

I am sorry but I think the help_text is not helping much, personally my
eyes are still bleeding ;-)

If you are happy with the patch for the height issue (no 2.), I can start
a pull request and work from there.

The first couple of "fixes" I tried were not effective and it seems like I
have to dive into flex myself much deeper as my understanding of it is
flawed.
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:3>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Changes (by Sarah Boyce):

* Attachment "image-20240429-085114.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/35404>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Comment (by Sarah Boyce):

> If you are happy with the patch for the height issue (no 2.), ...

I think you can also remove the line-height

{{{#!diff
M django/contrib/admin/static/admin/css/forms.css
@@ -84,14 +84,13 @@ form ul.inline li {
min-width: 160px;
width: 160px;
word-wrap: break-word;
- line-height: 1;
}

.aligned label:not(.vCheckboxLabel):after {
content: '';
display: inline-block;
vertical-align: middle;
- height: 1.625rem;
}

}}}

Looks ok to me
[[Image(image-20240429-085114.png)]]

> ..., I can start a pull request and work from there.

Please do! I also think (2) should be a separate commit to (1) and (3)
(maybe a commit message something like... Refs #35404 -- Fixed line height
of admin fieldset labels.)
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:4>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Comment (by minusf):

> I think you can also remove the line-height

I might be wrong but afaik multiline paragraphs strongly benefit in
readability with `line-height` at least `1.2` to `1.5` depending on font
type... This is an actual issue in the admin how it shows `help_text` as
well and I meant to send a patch for that for years...
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:5>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Changes (by minusf):

* Attachment "Screenshot 2024-05-07 at 22.53.11.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/35404>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------
Changes (by minusf):

* Attachment "Screenshot 2024-05-07 at 22.53.11.png" removed.

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------
Changes (by minusf):

* Attachment "admin-help-text.png" added.

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Comment (by Sarah Boyce):

> strongly benefit in readability with line-height at least 1.2 to 1.5
depending on font type

I agree 1 is too small 👍
In case I was misunderstood, for the css we were looking at `line-height:
1;` was overriding an existing larger line-height. Generally, I would like
our css have good defaults and not have too much being overriden for
particular classes/elements.
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:6>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Comment (by minusf):

Replying to [comment:6 Sarah Boyce]:

> In case I was misunderstood, for the css we were looking at `line-
height: 1;` was overriding an existing larger line-height. Generally, I
would like our css have good defaults and not have too much being
overriden for particular classes/elements.

Yes, I see what you mean. Removing it sets `line-height: normal` (by user
agent), which according to mdn is "a default value of roughly 1.2,
depending on the element's font-family"...

https://github.com/django/django/pull/18151
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:7>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Changes (by minusf):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:8>

[Django]

#35404: Admin fieldset multiple flexbox regressions
------------------------------------+------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------------+------------------------------------

Comment (by minusf):

Regarding `help_text`, I think that with this small font `line-height:
normal` is not enough:
{{{#!diff
M django/contrib/admin/static/admin/css/base.css
@@ -268,6 +268,7 @@ hr {
.help, p.help, form p.help, div.help, form div.help, div.help li {
font-size: 0.6875rem;
color: var(--body-quiet-color);
+ line-height: 1.5;
}
·
div.help ul {
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:9>

[Django]

#35404: Admin fieldset multiple flexbox regressions

-------------------------------------+-------------------------------------

Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted

accessibility |

Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by Sarah Boyce):

* keywords: css admin fieldset => css admin fieldset accessibility

Comment:

Replying to [comment:9 minusf]:

> Regarding `help_text`, I think that with this small font `line-height:
normal` is not enough:
> {{{#!diff
> M django/contrib/admin/static/admin/css/base.css
> @@ -268,6 +268,7 @@ hr {
> .help, p.help, form p.help, div.help, form div.help, div.help li {
> font-size: 0.6875rem;
> color: var(--body-quiet-color);
> + line-height: 1.5;
> }
> ·
> div.help ul {
> }}}

I don't think, taking into account the way the admin is already, this css
change clearly fixes an issue/bug.

I think a wider discussion on whether the fonts and spacing in the admin
is too small (with the accessibility team involved) is a good idea, but
out of scope of this ticket.
There are many small tweaks we can make to css and there is a lot of
subjectivity around what looks "better", so let's fix the issue as
reported and create further discussions as necessary. Then the changes we
make are scoped out and made to all required areas at once, rather than a
series of many small tweaks requiring many reviews. I hope that makes
sense 👍
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:10>

[Django]

#35404: Admin fieldset multiple flexbox regressions
-------------------------------------+-------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
accessibility |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by Sarah Boyce <42296566+sarahboyce@…>):

In [changeset:"dd46cab6e076ec766ef0727a16f4219e3e6cb552" dd46cab]:
{{{#!CommitTicketReference repository=""
revision="dd46cab6e076ec766ef0727a16f4219e3e6cb552"
Refs #35404 -- Fixed the line height of admin fieldset labels.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:11>

[Django]

#35404: Admin fieldset multiple flexbox regressions
-------------------------------------+-------------------------------------
Reporter: minusf | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: css admin fieldset | Triage Stage: Accepted
accessibility |

Has patch: 0 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* has_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/35404#comment:12>