[5.x]: Header section layout on smaller devices looks broken

[JayBox325]

What happened?

Description

The layout of the header sections on mobile or smaller tablets looks broken with how the layout has been styled. See here:

Steps to reproduce

1. Create an entry type
2. Create an entry
3. View on smaller viewports

Expected behavior

I'd expect the buttons and title to stack much smarter than they currently do. I have achieved this by editing the markup in the Inspector by just using the three-dots "more" button to hide more of the options, as these buttons are utility actions that could be hidden at this size, but also aligning the actions to the left to match the title.

One of the problematic elements is the .activity-container div which throws extra gap spacing in at the start when it's empty.

Actual behavior

As per the screenshot in the Description.

Craft CMS version

5.6.0.2

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[brandonkelly]

Related: #16524

[JayBox325]

Hah, sorry @brandonkelly, they're both mine! I can combine them into one ticket if that's easier?

[brandonkelly]

@JayBox325 It’s fine, they’re both slightly different issues, but could probably be tackled together.