Published post actions wrap over "add feature image"

[lorumic]

Issue Summary

I experienced this issue on an old Android phone - so kind of an edge case - and I was able to reproduce it easily in the device view of the Chrome dev tools. The problem is: when editing a published post on mobile, if there is not enough space in the header, the 2 Update/Unpublish action buttons at the top wrap to a second line, due to the flex-wrap attribute of their parent, and cover the "Add feature image" button, making it unusable:

I guess this might also be the reason why, for a draft post, display: none is applied to the "Preview" button when screen width is less than or equal to 500px. I don't know if a similar solution would be good in this case, though, as they might both be important, so we might not want to hide either of them. However, being able to add the feature image to a published post is important too, so hopefully a reasonable solution can be found - or maybe none at all, if it's indeed too much of an edge case.

Steps to Reproduce

1. Open Chrome dev tools, toggle device mode.
2. Select "Dimensions: Responsive" to dynamically resize the device width.
3. Lower the width until you see the problem: the 2 action buttons wrap to a second line and cover the upper part of the editor, where the "Add feature image" button is placed.

Ghost Version

5.69.3

Node.js Version

v18.18.2

How did you install Ghost?

From source (Ubuntu)

Database type

MySQL 5.7

Browser & OS version

Google Chrome 118.0.5993.70, Ubuntu

Relevant log / error output

No response

Code of Conduct

• [X] I agree to be friendly and polite to people in this repository