fixed an issue where status bar items can overflow

[nirabhromakhal]

This PR fixes #154708
I made the status bar scrollable and allowed horizontal scrolling of the status bar using mouse wheel or left/right arrow keys.

[bpasero]

Nice, but looking at this change made me realise that the simplest solution is to simply set overflow: hidden to the status bar. I am not entirely sure we want the scrolling to be honest, just because that may break existing experiences.

The reason overflow: visible was added in the first place seems to be b8a75a3 and I think we would need a solution that sets overflow: visible only when there is a beak.

[nirabhromakhal]

Hi,
I have a question regarding this. What if somebody clicks on the notification 'bell', and then decreases the vscode window width? What will happen to the beak? Will it still be shown when the 'bell' is hidden?

[nirabhromakhal]

I think we would need a solution that sets overflow: visible only when there is a beak.

Let us suppose that there is a beak, and overflow is set to visible. Now if we decrease the window width, then the status bar items will overflow again.

This is one of the only solutions I could think of where the beak has position: absolute but relative to the entire window, so even with overflow: hidden set for the status bar, the beak is still displayed on top of everything when the bell is clicked.

status.bar.fix.with.beak.mp4

[bpasero]

Yeah I think it would be fine to still show the beak even if the notification bell drops. Can you push those changes and I can review?

[nirabhromakhal]

I'm sorry I didn't realize force pushing will close the pull request. Anyway I created a new PR without the old commit.