Feedback on new 🍔 and user menus

On my note 3 that is a sliver about a cm wide. Pressing there does nothing when the search panel and keyboard is open. The other two menu panels do close when I press there.

The x is a more reliable a way to x out of the panels, intuitive and universally understood.

2 Likes

Here’s a bug on mobile, affects all three menu buttons.

Repro: Tap menu twice to open/close. Menu icon stays highlighted. You have to tap elsewhere to deactivate it.

Also getting a scroll bar on the user notification menu now. Only scrolls a couple px.

2 Likes

this appears to be related to the fact that 10 notifications are listed but the length of each notification is unpredictable, and we’re all on different sized screens. I’ve found that if a few notifications are very long and go over to 3 or 4 lines it ends up creating this extra pagination, and (worse) also hiding the “view older notifications…” and now the log out button at bottom.

The answer seems to be to show fewer notifications - maybe this could be an admin setting? Or perhaps limiting the length of each notification to x chars followed by ... ?

You can do the same on desktop by clicking the icons twice without moving the mouse. I’d say it not a bug, it’s simply where the focus is at that point in time.

2 Likes

Really? From here it seems like they only highlight on hover, and as soon as the mouse leaves it’s un-highlighted. On mobile you can scroll around, zoom… until you tap somewhere it stays highlighted.

Agree that the focus is why it’s still highlighted, but once the menu is closed it should un-focus on its own.

It’s only happening with the new logout button. If you turn that off, the scroll bar goes away, no matter the notification length. Guessing it’s a single line of CSS, if I can find it…

EDIT: thanks @cpradio, I’m using your fix from here:

https://meta.discourse.org/t/logout-menu-item/32731/8?u=ky_metro

The padding on the logout link causes it, you can remove that, but then the alignment is off. Either way, this will eventually occur as any plugin that makes use of the outlet there will cause this behavior.

Some of that discussion exists at
https://meta.discourse.org/t/logout-menu-item/32731/6?u=cpradio

1 Like

Keep in mind that won’t guarantee you don’t get a scrollbar. You may still get one if any of the notifications wrap to three lines, and you’ll definitely get it when 2 or more wrap to three lines.

Edit:
It may be wiser to alter the panel-body height

.user-menu .menu-panel .panel-body { height: 500px; }

Don’t need a guarantee… For 99% of my usage, I don’t get three lines. Unless there’s a big fat scroll bar in the way. :wink:

The following CSS change appears to clear the scroll bar with no ill effect:

.menu-panel {
   .panel-body {
       overflow-y: hidden;
       overflow-x: visible;
   }
}

I say appears because I haven’t tested it to any significant extent, but at first glance…?

Wouldn’t that prevent scrolling when the notifications become three lines (as you are intentionally hiding the scrollbar)?

If the notifications push the logout beyond the height, you’d have no way to reach it.

Do you mean something other than this by three line notification?

(Picture - Meta forums with CSS edit in place)

It’s definitely possible this has unintended effects, but I haven’t seen any issues yet.

Not an issue here on Meta.

Here is meta for me (without the overflow settings)

With them

So yes, the overflow-y:hidden can hide the link all together.

3 Likes

Ah okay, so it doesn’t work if the vertical screen/window size is smaller than that of the menu. That makes sense then, so much for that quick ‘fix’.

2 Likes

No worries, I’ve been trying to play with it a bit more to see if there are any other ways, but in all honesty the slight scrollbar doesn’t bother me too much. Though I think a slight height adjustment would solve most scenarios and the time that more than one 3 line notification comes around, scrolling is definitely okay.

Actually, the menu doesn’t work with the new logout button on short windows. Even with the scrollbar you can’t reach the bottom of the menu to click “log out”.

Agreed, it’s easy to get way too fixated on this stuff. Your simple padding fix above works well in my usage, even for the 3-line edge case above.

Not sure who should be looking at this, but yep, smaller screen sizes where the notifications may be long make it impossible to scroll to the bottom of the menu

When the window size is exapnded a bit, the menu scrollbar disappears even though the entire menu isn’t shown.

2 Likes

We might be able to use the new vh (viewport height) units to set the dropdown height based on viewport height?

…just learned about vh literally yesterday at an event apart, so it might take some more testing…

4 Likes