Fixed #31986 -- Fixed admin filter sidebar scrolling.

Regression in 2bc38bc7ca.

Thanks haki for the report.

django/contrib/admin/static/admin/css/changelists.css

@@ -1,8 +1,14 @@
 /* CHANGELISTS */
 
 #changelist {
-    position: relative;
+    display: flex;
-    width: 100%;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+#changelist .changelist-form-container {
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 #changelist table {
@@ -21,7 +27,6 @@
 
 .change-list .filtered .results, .change-list .filtered .paginator,
 .filtered #toolbar, .filtered div.xfull {
-    margin-right: 280px;
     width: auto;
 }
 
@@ -31,6 +36,7 @@
 
 #changelist-form .results {
     overflow-x: auto;
+    width: 100%;
 }
 
 #changelist .toplinks {
@@ -67,7 +73,7 @@
 
 /* TOOLBAR */
 
-#changelist #toolbar {
+#toolbar {
     padding: 8px 10px;
     margin-bottom: 15px;
     border-top: 1px solid #eee;
@@ -76,28 +82,28 @@
     color: #666;
 }
 
-#changelist #toolbar form input {
+#toolbar form input {
     border-radius: 4px;
     font-size: 14px;
     padding: 5px;
     color: #333;
 }
 
-#changelist #toolbar form #searchbar {
+#searchbar {
     height: 19px;
     border: 1px solid #ccc;
     padding: 2px 5px;
     margin: 0;
     vertical-align: top;
     font-size: 13px;
-    max-width: 230px;
+    max-width: 100%;
 }
 
-#changelist #toolbar form #searchbar:focus {
+#searchbar:focus {
     border-color: #999;
 }
 
-#changelist #toolbar form input[type="submit"] {
+#toolbar form input[type="submit"] {
     border: 1px solid #ccc;
     font-size: 13px;
     padding: 4px 8px;
@@ -109,12 +115,12 @@
     color: #333;
 }
 
-#changelist #toolbar form input[type="submit"]:focus,
+#toolbar form input[type="submit"]:focus,
-#changelist #toolbar form input[type="submit"]:hover {
+#toolbar form input[type="submit"]:hover {
     border-color: #999;
 }
 
-#changelist #changelist-search img {
+#changelist-search img {
     vertical-align: middle;
     margin-right: 4px;
 }
@@ -122,14 +128,11 @@
 /* FILTER COLUMN */
 
 #changelist-filter {
-    position: absolute;
+    order: 1;
-    top: 0;
-    right: 0;
-    z-index: 1000;
     width: 240px;
     background: #f8f8f8;
     border-left: none;
-    margin: 0;
+    margin: 0 0 0 30px;
 }
 
 #changelist-filter h2 {
@@ -227,6 +230,7 @@
     line-height: 22px;
     margin: 0;
     border-top: 1px solid #ddd;
+    width: 100%;
 }
 
 .paginator a:link, .paginator a:visited {
@@ -266,7 +270,6 @@
 /* ACTIONS */
 
 .filtered .actions {
-    margin-right: 280px;
     border-right: none;
 }
 
@@ -286,6 +289,7 @@
     border-bottom: none;
     line-height: 24px;
     color: #999;
+    width: 100%;
 }
 
 #changelist .actions.selected {

django/contrib/admin/static/admin/css/forms.css

@@ -426,6 +426,7 @@ body.popup .submit-row {
 
 .inline-related.tabular fieldset.module table {
     width: 100%;
+    overflow-x: scroll;
 }
 
 .last-related fieldset {

django/contrib/admin/static/admin/css/nav_sidebar.css

@@ -99,12 +99,21 @@
     background: #ffc;
 }
 
+.main > #nav-sidebar + .content {
+    max-width: calc(100% - 23px);
+}
+
+.main.shifted > #nav-sidebar + .content {
+    max-width: calc(100% - 299px);
+}
+
 @media (max-width: 767px) {
     #nav-sidebar, #toggle-nav-sidebar {
         display: none;
     }
-}
 
-.change-list .main > #nav-sidebar+.content {
+    .main > #nav-sidebar + .content,
-    overflow: hidden;
+    .main.shifted > #nav-sidebar + .content {
+        max-width: 100%;
+    }
 }

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

@@ -93,14 +93,14 @@ input[type="submit"], button {
 
     /* Changelist */
 
-    #changelist #toolbar {
+    #toolbar {
         border: none;
         padding: 15px;
     }
 
     #changelist-search > div {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         max-width: 480px;
     }
 
@@ -108,13 +108,17 @@ input[type="submit"], button {
         line-height: 22px;
     }
 
-    #changelist #toolbar form #searchbar {
+    #toolbar form #searchbar {
         flex: 1 0 auto;
         width: 0;
         height: 22px;
         margin: 0 10px 0 6px;
     }
 
+    #toolbar form input[type=submit] {
+        flex: 0 1 auto;
+    }
+
     #changelist-search .quiet {
         width: 100%;
         margin: 5px 0 0 25px;
@@ -159,9 +163,6 @@ input[type="submit"], button {
     .change-list .filtered .paginator,
     .filtered #toolbar,
     .filtered .actions,
-    .filtered div.xfull {
-        margin-right: 230px;
-    }
 
     #changelist .paginator {
         border-top-color: #eee;
@@ -500,25 +501,16 @@ input[type="submit"], button {
     /* Changelist */
 
     #changelist {
-        display: flex;
+        align-items: stretch;
         flex-direction: column;
     }
 
-    #changelist #toolbar {
+    #toolbar {
-        order: 1;
         padding: 10px;
     }
 
-    #changelist .xfull {
-        order: 2;
-    }
-
-    #changelist-form {
-        order: 3;
-    }
-
     #changelist-filter {
-        order: 4;
+        margin-left: 0;
     }
 
     #changelist .actions label {
@@ -534,11 +526,6 @@ input[type="submit"], button {
         flex: 1 0 100%;
     }
 
-    .change-list .filtered .results, .change-list .filtered .paginator,
-    .filtered #toolbar, .filtered .actions, .filtered div.xfull {
-        margin-right: 0;
-    }
-
     #changelist-filter {
         position: static;
         width: auto;
@@ -570,7 +557,6 @@ input[type="submit"], button {
     .aligned .form-row,
     .aligned .form-row > div {
         display: flex;
-        flex-wrap: wrap;
         max-width: 100vw;
     }
 

django/contrib/admin/static/admin/css/responsive_rtl.css

@@ -23,9 +23,9 @@
     [dir="rtl"] .change-list .filtered .paginator,
     [dir="rtl"] .filtered #toolbar,
     [dir="rtl"] .filtered div.xfull,
-    [dir="rtl"] .filtered .actions {
+    [dir="rtl"] .filtered .actions,
-        margin-right: 0;
+    [dir="rtl"] #changelist-filter {
-        margin-left: 230px;
+        margin-left: 0;
     }
 
     [dir="rtl"] .inline-group ul.tools a.add,
@@ -63,14 +63,6 @@
 /* MOBILE */
 
 @media (max-width: 767px) {
-    [dir="rtl"] .change-list .filtered .results,
-    [dir="rtl"] .change-list .filtered .paginator,
-    [dir="rtl"] .filtered #toolbar,
-    [dir="rtl"] .filtered div.xfull,
-    [dir="rtl"] .filtered .actions {
-        margin-left: 0;
-    }
-
     [dir="rtl"] .aligned .related-lookup,
     [dir="rtl"] .aligned .datetimeshortcuts {
         margin-left: 0;
@@ -80,4 +72,9 @@
     [dir="rtl"] .aligned ul {
         margin-right: 0;
     }
+
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
+        margin-right: 0;
+    }
 }

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

@@ -87,15 +87,10 @@ thead th.sorted .text {
 }
 
 #changelist-filter {
-    right: auto;
-    left: 0;
     border-left: none;
     border-right: none;
-}
+    margin-left: 0;
-
+    margin-right: 30px;
-.change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull {
-    margin-right: 0;
-    margin-left: 280px;
 }
 
 #changelist-filter li.selected {
@@ -107,11 +102,6 @@ thead th.sorted .text {
     margin-right: -15px;
 }
 
-.filtered .actions {
-    margin-left: 280px;
-    margin-right: 0;
-}
-
 #changelist table tbody td:first-child, #changelist table tbody th:first-child {
     border-right: none;
     border-left: none;

django/contrib/admin/templates/admin/change_list.html

@@ -53,21 +53,10 @@
         {{ cl.formset.non_form_errors }}
     {% endif %}
     <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
+      <div class="changelist-form-container">
         {% block search %}{% search_form cl %}{% endblock %}
         {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
 
-      {% block filters %}
-        {% if cl.has_filters %}
-          <div id="changelist-filter">
-            <h2>{% translate 'Filter' %}</h2>
-            {% if cl.has_active_filters %}<h3 id="changelist-filter-clear">
-              <a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "Clear all filters" %}</a>
-            </h3>{% endif %}
-            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
-          </div>
-        {% endif %}
-      {% endblock %}
-
         <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
         {% if cl.formset %}
           <div>{{ cl.formset.management_form }}</div>
@@ -81,5 +70,17 @@
         {% block pagination %}{% pagination cl %}{% endblock %}
         </form>
       </div>
+      {% block filters %}
+        {% if cl.has_filters %}
+          <div id="changelist-filter">
+            <h2>{% translate 'Filter' %}</h2>
+            {% if cl.has_active_filters %}<h3 id="changelist-filter-clear">
+              <a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "Clear all filters" %}</a>
+            </h3>{% endif %}
+            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
+          </div>
+        {% endif %}
+      {% endblock %}
+    </div>
   </div>
 {% endblock %}

docs/releases/3.1.2.txt

@@ -26,3 +26,6 @@ Bugfixes
 
 * Fixed a ``django.contrib.admin.EmptyFieldListFilter`` crash when using on a
   ``GenericRelation`` (:ticket:`32038`).
+
+* Fixed a regression in Django 3.1.1 where the admin changelist filter sidebar
+  would not scroll for a long list of available filters (:ticket:`31986`).