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

@@ -19,6 +19,7 @@ Changelog
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
  * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)
  * 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: Ensure radio buttons / checkboxes display vertically under Django 4.0 (Matt Westcott)
 
 
 3.0 (16.05.2022)

client/scss/components/_forms.scss

@@ -272,7 +272,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/4.0.md

@@ -29,6 +29,7 @@ depth: 1
  * Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)
  * Replace `PageRevision` with generic `Revision` model (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)
+ * Ensure radio buttons / checkboxes display vertically under Django 4.0 (Matt Westcott)
 
 
 ## Upgrade considerations