Make radio buttons / checkboxes display vertically under Django 4.0

Fixes #8190
Django 4 changed the rendering of radio button / checkbox lists to nested divs rather than ul/li - see 5942ab5eb1. This change simply applies the existing li styles to second-level divs.

CHANGELOG.txt

@@ -8,6 +8,7 @@ Changelog
  * Fix: Specific snippets list language picker was not properly styled (Sage Abdullah)
  * Fix: Ensure the upgrade notification request for the latest release, which can be disabled via the `WAGTAIL_ENABLE_UPDATE_CHECK` sends the referrer origin with `strict-origin-when-cross-origin` (Karl Hobley)
  * Fix: Fix misaligned spinner icon on page action button (LB (Ben Johnston))
+ * Fix: Ensure radio buttons / checkboxes display vertically under Django 4.0 (Matt Westcott)
 
 
 3.0 (16.05.2022)

client/scss/components/_forms.scss

@@ -287,7 +287,11 @@ label.required:after {
 .model_multiple_choice_field .input li,
 .checkbox_select_multiple .input li,
 .multiple_choice_field .input li,
-.choice_field .input li {
+.choice_field .input li,
+.model_multiple_choice_field .input > div > div,
+.checkbox_select_multiple .input > div > div,
+.multiple_choice_field .input > div > div,
+.choice_field .input > div > div {
   label {
     display: inline-flex;
     align-items: center;

docs/releases/3.0.1.md

@@ -15,3 +15,4 @@ depth: 1
  * Specific snippets list language picker was not properly styled (Sage Abdullah)
  * Ensure the upgrade notification request for the latest release, which can be disabled via the `WAGTAIL_ENABLE_UPDATE_CHECK` sends the referrer origin with `strict-origin-when-cross-origin` (Karl Hobley)
  * Fix misaligned spinner icon on page action button (LB (Ben Johnston))
+ * Ensure radio buttons / checkboxes display vertically under Django 4.0 (Matt Westcott)