I'm having a bit of trouble understanding your suggestion. What is expected when the bell overflows out of the status bar? Or does it never overflow?

I never overflows. The elements should overflow in this order:

• first the entries on the right hand side of the status bar beginning with the first item

I suggest you just look at the overflow behaviour how it works today, that is the intended overflow behaviour (except for the bug we want to fix).

In the current version, the leftmost right-hand-side items disappear when resized, and reappear with overflow when tabbing through the status bar. So the bell must always be present at the right end?
And the other right-hand-side items will overflow and pass through(under) the bell when tabbing entries?

Sorry for not being clear: tabbing through entries is very special in that the browser will forcefully reveal elements. I really don't mind in what order they get revealed, as long as there is no multi-line wrapping. But I do care for how elements overflow normally when not tabbing through the items. That behaviour should be as today, otherwise on small windows we suddenly hide the notification bell for all users.

So what if we make the bell postion absolute and the rest of the right items can be hidden on overflow and pass through (under) the bell.

Now for small windows, some of the right items will be hidden and the bell will always be at the right end(visible) due to absolute positioning.

No, I do not believe that changing the overflow behaviour is an option here. There can be a lot of people with careful crafted multi-window layouts where then suddenly status bar elements would appear differently.

So you mean that the overflow must be set visible for the status bar?

One idea I had was to set overflow: hidden by default as used to do and then only change to overflow: visible when a beak is showing anywhere. The beak is quite transient and goes away quickly anyway that it would reduce the chances of triggering this issue.

An alternative would be to find a way to show the beak always even when overflow: hidden.

Ok so, overflow is hidden, beak is showing, bell is showing always, and what will happen to the status bar right items when tabbing?

Yeah, in the case of beak showing we would still hit this issue. So maybe the best fix is to find a solution for beak showing without having to set overflow: visible.

An alternative would be to find a way to show the beak always even when overflow: hidden.

The current solution shows the beak even with overflow hidden. And I was thinking of making the bell position:absolute as well.

To summarise:

• do not break todays overflow behaviour, elements to the left on the right hand side should drop first until only the bell is visible
• do not break the beak showing when it is showing
• when keyboard focus is inside status bar, do not wrap multi line but allow to jump through elements (this works actually when overflow: hidden) - this is the actual fix for Status bar can overflow when tabbing through entries #154708

Things are clearer now, though I still have one question. Suppose the window is so small that only the left-hand items are showing along with the bell on the right. Now if we tab through the entries, where will the right items be displayed?

Will the left items push left (overflow) in order to show the right items?

I think I am fine with how overflow: hidden behaves. It seems a bit random but the element gets revealed which is good for accessibility reasons and there is no multiline dropping:

The clip you shared seems like a good solution. To make the beak display always, we just need to remove position: relative from the right items container, and change the beak position to right: 17px.

The overflow behavior is same as earlier and the beak is always showing when the bell is clicked

.

Ok, so what will happen if somebody clicked the bell and then tabbed to a different line of items? Will the notification box along with the beak disappear and then reappear when the bell is visible?

The notification box is actually independent from the status entry, but yeah the beak would disappear because it is coming from the status item.

How about this solution? I made the notification bell always visible using position: absolute

Maybe let me try an attempt tomorrow that makes the has-beak property dynamic so that we can just toggle overflow based on that, I feel that would be the simplest solution without risk of regressions.

I feel that whenever the overflow becomes visible, then if we tab through the entries, the problem will reappear.

This is really a though one, tried a lot more things but couldn't come up with something nice.

One direction I had thought would be fruitful is to find a way to prevent display: flex from overflowing the status bar container when it wraps. Tried what https://stackoverflow.com/questions/50068078/how-to-prevent-flex-items-from-overflowing-flex-parent-with-no-wrap indicates, but I think since we explicitly set flex-wrap: wrap, it is somewhat expected that the elements flow out.

Summarising again the requirements:

• the beak should be visible over the status item where it belongs to, so it likely needs to be positioned relative to the status item
• the behaviour of flex-wrap: wrap is really nice because status items on the right hand side drop fully (without clipping) from left to right which is exactly the overflow behaviour we want
• being able to access all status bar items with the keyboard is important and I really like how it works when overflow: hidden
• a CSS only solution would be nice but it is not impossible to do a bit of JS trickery in statusbarPart.ts

How about this solution? I made the notification bell always visible using position: absolute

This is done only using css and the beak is always displayed over the bell, and the bell is always shown at the far right, other right-hand-items are displayed next to the bell when tabbing.
I think this satisfies all the requirements.

Additionally, when the notification box isn't displayed, the beak isn't displayed as well. And if we hide the status bar from settings, the absolute positioned bell isn't displayed as expected.

@nirabhromakhal but any item in the status bar can show a beak:

Even the most left one

Even the most left one

What are the steps to recreate this issue? I am only able to see the beak on the right.
Please check my most recent commit. I think it will always show on the right above the bell.

@nirabhromakhal we currently do not ship any other status item besides "Notifications" and "Feedback" with a beak that both happen to be on the right hand side.

When running locally out of sources, just set showBeak: true to a status bar item, such as:

Okay, there does not seem to be any simple solution to this problem.
How about I add a beak-div to every status item, the beak will be displayed relative to the status item?

Yeah worth a try 👍 . I think we have freedom how the beak is actually implemented. I wonder if we would still hit the issue with overflow:hidden though when the parent prevents overflowing, but we can see then.

Can you check my latest commit? Right now, I have:

overflow hidden
beak relative to parent item, shows as expected
tabbing through entries works as expected, but notifications beak doesn't disappear unless bell is clicked

@nirabhromakhal this seems to be working quite well upon first testing, nice 👍

I think your change however reverts some of the changes that meanwhile went into main branch, can you clean it up and then I do a review?

If you meant that I need to fetch upstream from microsoft/vscode, I have done it just now. If there is anything else, I'm not sure how to revert.

Thanks a lot, let's merge this in. I have some 💄 follow up changes that I will push once this lands in main.