Re: [Django] #36850: Django Admin filter sidebar wraps if its inner content becomes too large

[Django]

#36850: Django Admin filter sidebar wraps if its inner content becomes too large
-------------------------------+-----------------------------------------
Reporter: Mark | Owner: Nilesh Pahari
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: css | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------+-----------------------------------------
Changes (by Nilesh Pahari):

* owner: (none) => Nilesh Pahari
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36850#comment:5>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36850: Django Admin filter sidebar wraps if its inner content becomes too large

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

Reporter: Mark | Owner: Nilesh Pahari
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0

Severity: Release blocker | Resolution:
Keywords: css | Triage Stage: Accepted

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

---------------------------------+-----------------------------------------
Changes (by Jacob Walls):

* cc: Antoliny (added)
* severity: Normal => Release blocker
* stage: Unreviewed => Accepted


Old description:

> In the course of ticket [https://code.djangoproject.com/ticket/36511
> #36511] the layout of the changelist and its filter sidebar has been
> changed so that the sidebar seemingly should have a fixed width of 240px.
>
> The flex-base property does not necessarily restrict the width of the
> sidebar if it's content demands more (which happens eg. for dropdowns
> with large titles). Combined with the flex: wrap attribute, the sidebar
> wraps if the table also demands more width than available and looks
> broken (see attachment).
>
> This behavior can be simulated by giving a sidebar's and changelist's
> children some fixed, large width:
>
> {{{
> #changelist-filter-extra-actions {
> width: 290px;
> }
> #toolbar {
> width: 1000px;
> }
> }}}
>
> The problem could be resolved by reverting to the previous flex layout,
> but the motivation for those changes is unclear to me from the ticket and
> [https://github.com/django/django/pull/19659 related pr].
>
> Should the width of the sidebar stick to 240px or - at it has been before
> - should the sidebar grow if necessary?
>
> Does the new flex layout have any advantages to how it was in django <6?

New description:

In the course of ticket #36511 the layout of the changelist and its filter
sidebar has been changed so that the sidebar seemingly should have a fixed
width of 240px.

The flex-base property does not necessarily restrict the width of the
sidebar if it's content demands more (which happens eg. for dropdowns with
large titles). Combined with the flex: wrap attribute, the sidebar wraps
if the table also demands more width than available and looks broken (see
attachment).

This behavior can be simulated by giving a sidebar's and changelist's
children some fixed, large width:

{{{
#changelist-filter-extra-actions {
width: 290px;
}
#toolbar {
width: 1000px;
}
}}}

The problem could be resolved by reverting to the previous flex layout,
but the motivation for those changes is unclear to me from the ticket and
[https://github.com/django/django/pull/19659 related pr].

Should the width of the sidebar stick to 240px or - at it has been before
- should the sidebar grow if necessary?

Does the new flex layout have any advantages to how it was in django <6?

--
--
Ticket URL: <https://code.djangoproject.com/ticket/36850#comment:6>

[Django]

#36850: Django Admin filter sidebar wraps if its inner content becomes too large
---------------------------------+-----------------------------------------
Reporter: Mark | Owner: Nilesh Pahari
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Release blocker | Resolution:
Keywords: css | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

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

Changes (by Nilesh Pahari):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36850#comment:7>

[Django]

#36850: Django Admin filter sidebar wraps if its inner content becomes too large
---------------------------------+-----------------------------------------
Reporter: Mark | Owner: Nilesh Pahari
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Release blocker | Resolution:
Keywords: css | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+-----------------------------------------

Comment (by Nilesh Pahari):

PR https://github.com/django/django/pull/20528
--
Ticket URL: <https://code.djangoproject.com/ticket/36850#comment:8>

[Django]

#36850: Django Admin filter sidebar wraps if its inner content becomes too large
---------------------------------+-----------------------------------------
Reporter: Mark | Owner: Nilesh Pahari
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Release blocker | Resolution:
Keywords: css | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+-----------------------------------------

Comment (by Antoliny):

Thank you for reporting this issue Mark :)

The goal of #36511 was to ensure that filter elements are reached before
table elements during tab navigation (accessibility improvement).
And of course, the existing layout should have been maintained.
As mentioned above, it should have been kept identical to the existing
layout, and I think maintaining it is the best approach.
In a way that allows the sidebar to grow as it did before.

If we remove `flex-wrap` and add `min-width` to the area where the table
exists, I think we'll get the same layout as before even when the filter
element's width increases.
By the way, could you let me know how you discovered this issue?

I'm a bit unsure about how to write regression tests for this.
--
Ticket URL: <https://code.djangoproject.com/ticket/36850#comment:9>

[Django]

#36850: Django Admin filter sidebar wraps if its inner content becomes too large
---------------------------------+-----------------------------------------
Reporter: Mark | Owner: Nilesh Pahari
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Release blocker | Resolution:
Keywords: css | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
---------------------------------+-----------------------------------------

Changes (by Jacob Walls):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36850#comment:10>

[Django]

#36850: Django Admin filter sidebar wraps if its inner content becomes too large
---------------------------------+-----------------------------------------
Reporter: Mark | Owner: Nilesh Pahari
Type: Bug | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Release blocker | Resolution:
Keywords: css | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
---------------------------------+-----------------------------------------

Comment (by Mark):

Alright, makes sense. Just wanted to make sure, the flex-wrap change does
not have any accessibility implications I don't get. I see, you are
already pretty far with the PR from Nilesh. Thanks to both of you :)
--
Ticket URL: <https://code.djangoproject.com/ticket/36850#comment:11>