Review and replace usage of float layouts in admin UI for RTL support

[thibaudcolas]

Follow-up to #8051, based on @wagtail/ui team discussions (LB - Thibaud in particular), and research from @fabienheureux. Wagtail’s admin UI overuses float/clear for layout. This is problematic for RTL support since there is no browser support for flow-relative float/clear values. We could technically refactor our usage of float to have overrides based on [dir=rtl] attribute selectors, but floats tend to be hard to work with anyway, so we expect it would be better for us to instead focus on refactoring float usage to CSS grid or flexbox.

2023-02-17 review of the styles: 22 float: left, 12 float: right, 8 occurrences of clearfix mixin, 13 clear.

• Legacy dropdown
• Footer actions (New styles for footer actions #9030)
• content-wrapper
• header
• Listings filters
• Listings pagination
• Listings bulk actions
• ModelAdmin placeholder content
• jQuery datetimepicker
• Comments actions
• Tag filter (@column)
• Column classes

Original assessment:

• 21 clear: properties set
• 21 places our clearfix mixin is used
• 83 float: properties set

All of those instances need to be reviewed, and either removed or refactored to CSS grid / flexbox. We should then use stylelint to enforce no new code uses floats for layout.

---

For anyone wanting to contribute to this, there are two options:

• Spend time reviewing the code, and comment to this issue with your findings / recommendations for a particular case we’re using float
• Get on with refactoring for a given bit of the admin UI

[thibaudcolas]

Approach we discussed with @fabienheureux:

1. Set up visual regression testing w/ https://github.com/thibaudcolas/wagtail-tooling
2. Try to remove all floats and see how much of the potential regressions are picked up
3. Then work through the different float usage one by one, updating to Flexbox or grid

Components to ignore:

• Anything form styles / page editor / footer actions
• Datetimepicker
• Header
• Chooser

Potentially to trial first: 404, ModelAdmin

[thibaudcolas]

As of #8921, we have:

• 8 instances of our clearfix mixin. Most of them are related to our legacy float grid, which could likely be switched over to CSS grid layout without further refactoring
• 10 instances of clear
• 44 instances of float

[lb-]

#10020 - removes float usages from the gravatar / user profile image switching.

[thibaudcolas]

As of #8520, I believe our browser support will allow us to use flow-relative float: inline-start / float: inline-end. I’m still keen to eventually remove all usage of float but in the meantime it’ll be great for us to switch to logical values for this.

Audit of float styles currently:

• 43 instances of float
• 10 clear
• 7 clearfix