[Django] #35411: Checkboxes in admin panel extend off page depending on page size.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: | Version: 5.0
contrib.admin | Keywords: admin, flex,
Severity: Normal | checkboxes
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
Issue:
By default, a model with many checkboxes in Django Admin in a fieldset
will extend off the page, clipping and causing you to lose inputs based
off the number of bools and size of your screen.
The latter means you cannot get around it by trying to split them using
ModelAdmin's fieldsets, because you don't know what kind of screen size
the admin will be using.

It looks like it came about due to someone deleting flex-wrap: flex; from
the admin css in
https://github.com/django/django/commit/729266c6f29c7a0677b24926a86a767ef3078b26

This looks to be an extremely messy commit, as there are still flex
attributes littered everywhere, orphaned by the change. The easy solution
is to add flex-wrap back, but that may cause a reversion of the original
bug.

Example images will be attached:
--
Ticket URL: <https://code.djangoproject.com/ticket/35411>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new

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

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

Changes (by ilar):

* Attachment "image-20240427-055731.png" added.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by ilar):

* Attachment "image-20240427-055752.png" added.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by ilar):

* Attachment "image-20240427-055822.png" added.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by ilar):

* Attachment "image-20240427-055852.png" added.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by ilar):

First picture is just before it transitions into mobile mode. Second is
about half the width of the third picture, which is fullscreen on a 1440p
monitor. Fourth is stretching it across multiple monitors to get the full
list.

For the next set of pictures, they are the behavior before the commit
mentioned above, at roughly the same screen sizes (except the fourth,
because there's no reason to go that large.
--
Ticket URL: <https://code.djangoproject.com/ticket/35411#comment:1>

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by ilar):

* Attachment "image-20240427-060142.png" added.

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

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by ilar):

* Attachment "image-20240427-060225.png" added.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by ilar):

* Attachment "image-20240427-060239.png" added.

[Django]

#35411: Checkboxes in admin panel extend off page depending on page size.
-------------------------------------+-------------------------------------
Reporter: ilar | Owner: nobody

Type: Bug | Status: closed
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution: duplicate

Keywords: admin, flex, | Triage Stage:
checkboxes | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* resolution: => duplicate
* status: new => closed

Comment:

Hi ilar 👋 thank you for the report and screenshots.
Was able to replicate the issue and confirmed is was introduced in
729266c6f29c7a0677b24926a86a767ef3078b26, this has been fixed on main as
part of #35386.
--
Ticket URL: <https://code.djangoproject.com/ticket/35411#comment:2>