Fixed #34995 -- Improved position of related widget's add link on admin pages on small screens.

Regression in 1699f8b52a.

Co-authored-by: Sarah Boyce <42296566+sarahboyce@users.noreply.github.com>
Co-authored-by: Natalia Bidart <124304+nessita@users.noreply.github.com>

django/contrib/admin/static/admin/css/responsive.css

@@ -237,22 +237,6 @@ input[type="submit"], button {
         padding: 7px;
     }
 
-    /* Related widget */
-
-    .related-widget-wrapper {
-        float: none;
-    }
-
-    .related-widget-wrapper-link + .selector {
-        max-width: calc(100% - 30px);
-        margin-right: 15px;
-    }
-
-    select + .related-widget-wrapper-link,
-    .related-widget-wrapper-link + .related-widget-wrapper-link {
-        margin-left: 10px;
-    }
-
     /* Selector */
 
     .selector {
@@ -270,7 +254,7 @@ input[type="submit"], button {
     }
 
     .selector .selector-filter input {
-        width: auto;
+        width: 100%;
         min-height: 0;
         flex: 1 1;
     }
@@ -292,7 +276,6 @@ input[type="submit"], button {
         width: 26px;
         height: 52px;
         padding: 2px 0;
-        margin: auto 15px;
         border-radius: 20px;
         transform: translateY(-10px);
     }
@@ -336,7 +319,6 @@ input[type="submit"], button {
         width: 52px;
         height: 26px;
         padding: 0 2px;
-        margin: 15px auto;
         transform: none;
     }
 
@@ -684,21 +666,12 @@ input[type="submit"], button {
         align-self: center;
     }
 
-    select + .related-widget-wrapper-link,
-    .related-widget-wrapper-link + .related-widget-wrapper-link {
-        margin-left: 15px;
-    }
-
     /* Selector */
 
     .selector {
         flex-direction: column;
     }
 
-    .selector > * {
-        float: none;
-    }
-
     .selector-available, .selector-chosen {
         margin-bottom: 0;
         flex: 1 1 auto;
@@ -710,11 +683,9 @@ input[type="submit"], button {
 
     .selector ul.selector-chooser {
         display: block;
-        float: none;
         width: 52px;
         height: 26px;
         padding: 0 2px;
-        margin: 15px auto 20px;
         transform: none;
     }
 

django/contrib/admin/static/admin/css/rtl.css

@@ -289,3 +289,7 @@ form .form-row p.datetime {
     margin-left: inherit;
     margin-right: 2px;
 }
+
+.selector .selector-chooser {
+    margin: 0;
+}

django/contrib/admin/static/admin/css/widgets.css

@@ -1,23 +1,24 @@
 /* SELECTOR (FILTER INTERFACE) */
 
 .selector {
-    width: 800px;
-    float: left;
     display: flex;
+    flex-grow: 1;
+    gap: 10px;
 }
 
 .selector select {
-    width: 380px;
     height: 17.2em;
     flex: 1 0 auto;
+    overflow: scroll;
+    width: 100%;
 }
 
 .selector-available, .selector-chosen {
-    width: 380px;
     text-align: center;
     margin-bottom: 5px;
     display: flex;
     flex-direction: column;
+    flex: 1 1;
 }
 
 .selector-available h2, .selector-chosen h2 {
@@ -58,6 +59,7 @@
     font-size: 0.625rem;
     margin: 0;
     text-align: left;
+    display: flex;
 }
 
 .selector .selector-filter label,
@@ -72,9 +74,12 @@
     min-width: auto;
 }
 
+.selector-filter input {
+    flex-grow: 1;
+}
+
 .selector .selector-available input,
 .selector .selector-chosen input {
-    width: 320px;
     margin-left: 8px;
 }
 
@@ -83,7 +88,6 @@
     width: 22px;
     background-color: var(--selected-bg);
     border-radius: 10px;
-    margin: 0 5px;
     padding: 0;
     transform: translateY(-17px);
 }
@@ -575,8 +579,9 @@ ul.timelist, .timelist li {
 
 /* RELATED WIDGET WRAPPER */
 .related-widget-wrapper {
-    float: left;       /* display properly in form rows with multiple fields */
+    display: flex;
-    overflow: hidden;  /* clear floated contents */
+    gap: 10px;
+    flex-grow: 1;
 }
 
 .related-widget-wrapper-link {
@@ -589,11 +594,6 @@ ul.timelist, .timelist li {
     filter: grayscale(0);
 }
 
-select + .related-widget-wrapper-link,
-.related-widget-wrapper-link + .related-widget-wrapper-link {
-    margin-left: 7px;
-}
-
 /* GIS MAPS */
 .dj_map {
     width: 600px;

django/contrib/admin/static/admin/js/SelectFilter2.js

@@ -30,6 +30,9 @@ Requires core.js and SelectBox.js.
 
             // <div class="selector"> or <div class="selector stacked">
             const selector_div = quickElement('div', from_box.parentNode);
+            // Make sure the selector div is at the beginning so that the
+            // add link would be displayed to the right of the widget.
+            from_box.parentNode.prepend(selector_div);
             selector_div.className = is_stacked ? 'selector stacked' : 'selector';
 
             // <div class="selector-available">

js_tests/admin/SelectFilter2.test.js

@@ -5,9 +5,13 @@ QUnit.module('admin.SelectFilter2');
 
 QUnit.test('init', function(assert) {
     const $ = django.jQuery;
-    $('<form><select id="id"></select></form>').appendTo('#qunit-fixture');
+    $('<form id="test"></form>').appendTo('#qunit-fixture');
-    $('<option value="0">A</option>').appendTo('#id');
+    $('<label for="id_id">Test</label>').appendTo('#test');
+    $('<div class="helptext">This is helpful.</div>').appendTo('#test');
+    $('<select id="id"><option value="0">A</option></select>').appendTo('#test');
     SelectFilter.init('id', 'things', 0);
+    assert.equal($('#test').children().first().prop("tagName"), "DIV");
+    assert.equal($('#test').children().first().attr("class"), "selector");
     assert.equal($('.selector-available h2').text().trim(), "Available things");
     assert.equal($('.selector-chosen h2').text().trim(), "Chosen things");
     assert.equal($('.selector-chosen select')[0].getAttribute('multiple'), '');