Add CSS variable to make the UI gaps consistent and fix the resize handle position

[toger5]

Fixes: element-hq/element-web#19904
Fixes: element-hq/element-web#19938
This changes the gap width and makes it consistent all over element. It can be adjusted for the whole UI using the css variable $container-gap-width.
It would be best, if design could propose or approve the value for the gaps (Right now I chose 8px).

Additionally this changes which part part of the resizable is responsible for the gap. Now the main split has a marigin of $container-gap-width/2 and the right/left panel as well so that the resizeHandle is automatically in the center of the gap and not closer to one of the elements. This also reduces the trickery needed with the resizeHandle::before element (the resize indicator):


Before:

---

Here's what your changelog entry will look like:

✨ Features

• Add CSS variable to make the UI gaps consistent and fix the resize handle position (#7234). Fixes Optimize spacing between the AppsDrawer and the right/left panel element-hq/element-web#19904 and Maximised widgets don't have any bottom margin element-hq/element-web#19938. Contributed by @toger5.

Preview: https://61adf6973059ca16aacbefff--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.