Implement macos title bar negative space

[germain-gg]

Fixes #1245
Needs matrix-org/matrix-react-sdk#11735 to land before this pull request

All the drag regions do not delegate the hover state to the web page. Which means the new room header would only trigger its hover state for no-drag zones. This does not allow us to implement the experience that we wish to provide.

We have decide to implement this compromise that adds negative space at the top of the application where you can drag the window around. This is a compromise and a step in the right direction until we have enough time to redesign the top bar and implement something more constructive rather than empty space.

Checklist

• Ensure your code works with manual testing
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

Here's what your changelog entry will look like:

✨ Features

• Implement macos title bar negative space (#1272). Fixes mac os header bar #1245.

[weeman1337]

Tested with the React SDK branch and works 👍

Only a small note: I would prefer all elements at the top to be aligned. Not the user avatar, search box and room header are not aligned:

[janogarcia]

@weeman1337 All of those should align to the same keyline. That looks like a bug. Do you get the same output in Electron?

[weeman1337]

@weeman1337 All of those should align to the same keyline. That looks like a bug. Do you get the same output in Electron?

This is how it currently looks like with the old room header

New room header:

Note that the spacing above is intentional to reserve space for the window controls. They are not visible in my environment.