Privacy option radio buttons display horizontally under Django 4.0

The radio buttons in the Page Privacy modal are laid out horizontally when running under Django 4.0.3, where previously they were arranged vertically. (I think I’ve seen similar glitches in other places where radio buttons / checkboxes are used - e.g. m2m relations in the page edit form - although I don’t have any examples to hand)

Under Django 3.2.12:

Under Django 4.0.3:

Steps to Reproduce

1. Set up bakerydemo with Django 3.2
2. Log in to admin and edit a blog page
3. Switch to the Settings tab and click on “Set page privacy”; see options laid out vertically
4. pip install "Django>=4" and restart server
5. Refresh page and click on “Set page privacy” again; see options laid out horizontally

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: no (just on bakerydemo)

Technical details

• Python version: 3.8.0
• Django version: 4.0.3
• Wagtail version: stable/2.16.x
• Browser version: Chrome 99 https://www.whatsmybrowser.org/b/PQC9L

[proshee]

I figured out the problem by the inspect element in chrome and I run it as well, and it’s working fine. It can be solved by adding breaks tags easily, earlier it was not required, but now it is and the only problem is I am not getting where to change the code that I’ve seen with the help of inspect element.

[lb-]

@proshee assuming you have a development environment up and running, the first step is to reproduce this locally.

Once you can reproduce it you should be able to have one browser open with the ‘working’ version and another with the ‘broken’ version.

From here, start exploring the CSS used in the browser inspector to see what could be wrong, my guess this is a DOM structure change (e.g. maybe the radio buttons are in ul and the used to be in a ol) or a classes change.

Other avenues of exploration

• look at what widget / field is in use here and whether that is built in with Django, or something Wagtail uses with a custom widget
• look at the Django 4.0 release notes about any changes that may have caused this issue
• Google ‘Django 4.0 radio not showing correctly’ and see what comes up

Hope that helps.