As for adding some margin outside of the canvas, I don't think Construct likes that. But construct games can run in an iframe, so you could add a custom index.html that has the game running in an iframe and add the margin to the iframe. I think that should work, but I'd not want to bother with it.
Instead adding it in the game should be very much possible and not too hard. First there's the anchor behavior construct.net/en/make-games/manuals/construct-3/behavior-reference/anchor which I found has some quirks to it, but overall is useable.
Setting the spacer manually there's a couple of things to think about:
- You can detect device orientation in the browser plugin "is portrait/landscape" construct.net/en/make-games/manuals/construct-3/plugin-reference/browser
- The plugin also has the request fullscreen action, which offers different scaling modes that you may have to take into consideration. That is likely why your bar changes size when resizing. You might want to refer to this construct.net/en/tutorials/supporting-multiple-screen-17
- There are system expressions to get the desired full width/height/etc. of the viewport. ViewportBottom(layer), ViewportLeft(layer). ViewportRight(layer), ViewportTop(layer), ViewportMidX(layer), ViewportMidY(layer), ViewportWidth(layer), ViewportHeight(layer)
- You have to pass a layer into these, so I recommend creating a layer on top specifically just for your bar. And most likely you'd want to set it up for UI-type stuff so with parallax 0,0 and scalerate 0 construct.net/en/make-games/manuals/construct-3/project-primitives/layers