Revised fix for menu/UI issues for Joomla 4.0

[vingle]

Overview

CiviCRM's below Menubar position is hidden in Joomla 4's new admin theme (1); and at tablet (2) & mobile (3), width, also for wrapped menus (4). There are other issues tidied here: white labels for the search menu (5); padding around the main content; and dashlets sometimes becomming extra wide (6).

Before

2.

3.

4.

5.

After

2.

3.

4.

5.

Technical Details

This was tested on Civi 5.37.1 with Joomla 4 Beta 7; as well as Joomla 3.9.26 to check against regressions. The css is namespaced with body.layout-default to prevent styles loading on Joomla 3.x; but in the event Joomla removes that from its body classes in the final J4 release another method will be needed.

Comments

To help testing/debugging, the 1st commit in the PR is the menu, the 3rd removes padding and the 4th fixes the dashlet bug (the 2nd and 5th are spacing/indent tidying – which I didn't notice till checking the diff).

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[eileenmcnaughton]

@colemanw is this OK now?

[colemanw]

Yes I think the code comments are good enough for now to distinguish the old from new css. Code location is good.