[Django] #35319: Move the link to add a related object inside the .selector-available column instead of after the selector widget for FilteredSelectMultiple

[Django]

#35319: Move the link to add a related object inside the .selector-available column
instead of after the selector widget for FilteredSelectMultiple
------------------------------------------------+------------------------
Reporter: Hrushikesh Vaidya | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
------------------------------------------------+------------------------
This came up during discussion on
[https://github.com/django/django/pull/16975 this PR] trying to fix
#34643, specifically in
[https://github.com/django/django/pull/16975#issuecomment-1998985064 this
comment].

The patch for #34643 involves allowing the related widget wrapper to span
the entire width of the screen, which causes the JavaScript widget for
FilteredSelectMultiple to span the entire width of the screen. However, in
case the widget has a link to add another object, that link now seems
disconnected from the widget, especially on mobile layouts (see attached).

It would improve UX if the link to add a related object is moved to the
header of the widget instead of at the end.
--
Ticket URL: <https://code.djangoproject.com/ticket/35319>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35319: Move the link to add a related object inside the .selector-available column
instead of after the selector widget for FilteredSelectMultiple

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

Reporter: Hrushikesh Vaidya | Owner: nobody

Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:

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

-------------------------------------+-------------------------------------
Changes (by Hrushikesh Vaidya):

* Attachment "filtered-select-multiple-full-width.png" added.

The current position of the add link, after the filtered select widget
stretches the full width of the screen

[Django]

#35319: Move the link to add a related object inside the .selector-available column
instead of after the selector widget for FilteredSelectMultiple
-------------------------------------+-------------------------------------
Reporter: Hrushikesh Vaidya | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Hrushikesh Vaidya):

* Attachment "filtered-select-multiple-full-width-mobile.png" added.

The current position of the add link on mobile, after the patch

[Django]

#35319: Move the link to add a related object inside the .selector-available column
instead of after the selector widget for FilteredSelectMultiple
-------------------------------------+-------------------------------------
Reporter: Hrushikesh Vaidya | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Hrushikesh Vaidya):

* Attachment "filtered-select-multiple-new-add-link-position.png" added.

Proposed new location of the add link