Partially revert listing styles changes to fix layout issues

[laymonage]

Redo of #11933. Fixes #11949.

In bb12877, the change of .title-wrapper from inline to inline-flex caused an issue with Safari, which b8dd7f4 tried to fix.

Then, further cleanup in 08ee15a caused an issue to the title cell. While we intended the styles to vertically align the title cells, this wasn't a good idea for a few reasons:

• The styles get applied to both td and th elements
• Even if we limit this to td.title, setting display: flex directly on the td element is bad, as it would cause the table layout to break in some cases (e.g. if two td.title elements are adjacent). This issue technically also existed in the old --inline-actions styles before 08ee15a, but it was pretty isolated as only HistoryView used it.

bb12877 was the commit that started it all. The styling changes in there was to ensure the user avatar and the user name is vertically aligned. However, since the changes in that commit caused a chain reaction to this point, I'll try a different approach instead. Using inline-flex instead of flex for the user avatar + name wrapper seems to do the trick.

In summary

We revert the changes to listing.scss that happened in:

• bb12877: revert the inline to inline-flex change
• b8dd7f4: revert the align-items: center addition and .icon-folder margin adjustment removal, as well as the classes added to elements in _page_title_explore.html
• 08ee15a: revert the flex styling added to .title (but keeping the removal of the unused --inline-actions styles

Then we slightly tweak the user_cell.html added in bb12877 to use w-inline-flex instead of w-flex for the wrapper around the user avatar and the name. The use of w-flex was what led me to make additional changes to the listing styles (changing inline to inline-flex, and all the chaos that ensued).

Comparison

Section	Wagtail 6.1	This PR	Wagtail 6.0
Page listing, root level
Page listing, home
Dashboard
Workflow listing
History
User listing

[squash-labs]

Manage this branch in Squash

Test this branch here: https://laymonagerevert-listing-styles-dixq0.squash.io

[laymonage]

This was originally .icon.initial in 6.0:

wagtail/client/scss/components/_listing.scss

Lines 247 to 250 in b5e068e

	.icon.initial {
	margin: 3px 0.3em 0 0;
	vertical-align: top;
	}

but was changed to .icon-folder in d04746b (then removed in b8dd7f4).

As a result, you'll see that the globe icon for site roots is no longer aligned when compared to 6.0, since the margin is only applied for the folder icon now:

This PR

6.0

[thibaudcolas]

Manual checks and visually regression test results are looking good. There is still funky alignment in a lot of places but I think this points at the need for further work, rather than changes in this PR.

Thank you @laymonage! Tested in Chrome 124, Safari 17.4, Firefox 128.