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

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

Reproduce the header layout by creating an entry type and entry, then viewing them on smaller mobile and tablet viewports. Inspect the header sections and the .activity-container behavior when it is empty, using the screenshots as the target. Done means the title and actions stack cleanly, utility actions can be handled appropriately at narrow widths, and the empty container adds no unwanted gap.