Experiment for a new look & style for header dropdown menus along with notification item styles.
We remove the “active” border styling from dropdowns in header. This border adds a complication to styling when creating themes.
We add spacing, and change the “active” icon styling on the notification menu.
Cool, this experiment is exciting! Love the new look here Jordan 
Some initial feedback: the spacing feels a bit tight, could we experiment with a tad bit more spacing? I think it’s because of the padding on the ⌄ ✓ Dismiss buttons is quite larger. I think it would be nice if we aligned them with the same padding (0.75rem ?)
Something like this?:
I definitely miss the titles of the topics. When there is one like or two likes by users with short names, there is enough information. But one or two words of the title are not enough for me.
Thanks for the feedback you two. Both are really spot on 
Im going to let more feedback pile up before addressing, but rest assured, I will be adding these to the list.
A few first impressions:
For Default and Horizon:
Horizon-specific:
I’ve found the trade-off of making more space for old notifications (that I’ve potentially already dealt with) in exchange for losing context of the newer notifications (which I still need to deal with): an unexpected one.
Goes into the same thing @moin said above, and the denser design, as pointed out by @keegan, is at odds with the move towards less density we’ve been aiming for with components like the sidebar.
This is due to the larger border radius set by horizon && core setting this radius as “large”. I have since moved this border in core to inherit the regularly set border radius.
Good callout. This is due to an incorrect setting I think.
wrt spacing… what do you think of this?
Here I am limiting the title to one line, but allowing the signifier to have it’s own line as well. I’ve also added left and right padding of the same space to match the buttons below.
This is possibly deviating a bit too much from the purpose of the experiment, but I think a larger issue that restricts our design is the amount of notifications we show. I don’t think we need to show a whole page long of notifications just because the browser height permits it. Users can click show more and be directed to /my/notifications when they need to see everything.
I think this is a step in the right direction, and we could possibly:
This design I found on Dribbble for example, has a nice ratio of amount of notifications / information on each notification / density.
Ah yeah, I really like that display.
I also noticed that the avatars aren’t as covered by the icon in your screenshot as in mine. Choosing “smaller” for the text size in the preferences seems to cause that. Maybe it was the case before, too, that a larger part of the avatar was covered because I changed the text size, but now the avatars are more covered than before. (I still prefer the old icon-only version, so I don’t mind.)
For comparison: with the experiment and in safe mode
And some icons are indented
I think we need more space around the notifications, this also would fix this misalignment:
Can these radii be the same?
I don’t feel like the grey background works well to indicate new and active… we usually use tertiary for both new and active states and grey for hover
The icons feel a little too small to me now, I find myself squinting to make out some
Do you have any ideas around how this would work out with search menu changes? we recently went full-width on highlights there so it feels a little off to be back to boxes
I like the stylechange on the tab in general.
One more spot to have a bit more spacing: the click target for the tabs on mobile is very small
It’s quite hard to tap.
TBH, I didn’t enjoy it and prefer the old layout.
Old:
New:
Since we don’t have the border anymore separating the notifications from the icons, the misalignment between them and the items gives the impression that something is off, specially in the first icon.
The icons are too small, and in mobile mode the spacing is off. It makes it harder to click on the correct icon. I already accidentally clicked a notification instead of the icon, twice.
I disagree. It’s nice that we take advantage of the available viewport.
This would be nice.
how would the avatar look aligned to the top so it’s always closer to where the username is? I wonder if the centered avatars would feel a bit “unanchored” if I had a lot of double-line notifications… very rough comparison
I did try this locally and it felt “off”, but I can implement here to see how it feels for everyone.
Can you try increasing the gap between the items to match the outer padding to see how it feels?
