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

[Mark]

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 ​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?

[Nilesh Pahari]

PR ​https://github.com/django/django/pull/20528

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

[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 :)

[Jacob Walls <jacobtylerwalls@…>]

In e92d1e3:

Fixed #36850 -- Prevented admin filter sidebar from wrapping below the changelist.

Removed flex-wrap from .changelist-form-container and added min-width to the
main content container to ensure proper layout behavior.
Regression in 6ea331907996a51842da55c1f8d65eea7b367c7d.

[Jacob Walls <jacobtylerwalls@…>]

In c4429af:

[6.0.x] Fixed #36850 -- Prevented admin filter sidebar from wrapping below the changelist.

Removed flex-wrap from .changelist-form-container and added min-width to the
main content container to ensure proper layout behavior.
Regression in 6ea331907996a51842da55c1f8d65eea7b367c7d.

Backport of e92d1e3b7858981185e93d717c5727544d66b66e from main.