[3.1.x] Fixed #32391 -- Used CSS flex properties for changelist filter.

skulden13 · carltongibson · commit 82e1294602ab · 2021-01-28T15:55:51.000+01:00
Matched layout adjustment using flex from admin sidebar added in d24ba1b. Filters would become squashed when viewport was constrained or list display table became too wide. Backport of 269a767 from master
diff --git a/django/contrib/admin/static/admin/css/changelists.css b/django/contrib/admin/static/admin/css/changelists.css
@@ -128,6 +128,7 @@
 /* FILTER COLUMN */
 
 #changelist-filter {
+    flex: 0 0 240px;
     order: 1;
     width: 240px;
     background: #f8f8f8;
diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css
@@ -157,7 +157,7 @@ input[type="submit"], button {
     }
 
     #changelist-filter {
-        width: 200px;
+        flex-basis: 200px;
     }
 
     .change-list .filtered .results,
diff --git a/docs/releases/3.1.6.txt b/docs/releases/3.1.6.txt
@@ -9,4 +9,5 @@ Django 3.1.6 fixes several bugs in 3.1.5.
 Bugfixes
 ========
 
-* ...
+* Fixed an admin layout issue in Django 3.1 where changelist filter controls 
+  would become squashed (:ticket:`32391`).

Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,7 @@ input[type="submit"], button {`
`157`	`157`	`}`
`158`	`158`
`159`	`159`	`#changelist-filter {`
`160`		`- width: 200px;`
	`160`	`+ flex-basis: 200px;`
`161`	`161`	`}`
`162`	`162`
`163`	`163`	`.change-list .filtered .results,`