Element-web: Tooltips/popovers get cut off if there is not enough room

[turt2live]

Description

This is probably not very high on the fix it list, but here we go:

Tooltips/popovers get cut off instead of switching sides. This is best revealed when using Riot on a portrait monitor (1200x1920) and the right sidebar collapsed. If the right sidebar is not collapsed, the popover appears normally (see screenshots).

Steps to reproduce

• Have an unconventional shape of screen such that the right edge of the message is the edge of your browser
• Open a popover next to the message (context menu)
• Note that it is cut off on the right edge

I would have expected it to flip to the other side, instead of overflowing. Granted, this is affecting a very limited number of people (me).

Log: not sent

Note: GitHub does not show the white bar on the right of the image - this is the boundary between Chrome and my other monitor

Version information

• Platform: web (in-browser)
• Browser: Chrome 56
• OS: Windows 10
• URL: riot.im/develop

[uhoreg]

A similar thing happens when you click on the menu button on the bottom message in an e2e room -- the last menu item ("Quote") gets cut off.

Everything is fine in a non-e2e room, because there the menu doesn't have the "View Decrypted Source" menu item, so it all fits.
For this issue, I think it might make sense to shift the menu up to fit it all.

[lampholder]

Agreed - I think in both cases this only affects E2E rooms (due to the wider link text on 'View Decrypted Source' and the longer list of items in the case of the menu button on the bottom of the page).

[turt2live]

Bridged messages that also set the source URL can be cut off. Here's an example of the menu:

[uhoreg]

Also happens with the room menu when the room that you want to change is near the bottom of the window. This can make it impossible to modify a room that is at the bottom of your list.

[lampholder]

I think we should track the message popup (#3429) separately from the room menu popup (#3792). Obviously they're thematically closely linked - I think #3792 is higher priority, but there's a good chance we might be able to tackle #3429 at the same time.

[Nostradamos]

Any hints how this could be solved? Would give it a try, but not sure how to do it. Maybe with some calculation, x/y pixel position, window height/width? Or what would be the proper way to do solve this?

[t3chguy]

Yeah calculate an offset to ensure that at worst the bottom of the menu is at the bottom of the window

[turt2live]

@rxl881 @lampholder Just a head's up: this now affects sticker packs:

[lampholder]

I've bumped the priority of this - even though sticker packs should now be fixed with an independent change, the original problem has gotten worse as more (and perhaps more commonly desired) functionality lurks behind that context menu.

I'm thinking primarily about replies - since 'Reply' is the bottommost option, and since you're quite likely to want to reply to the message that was most recently sent (esp. when testing replies as it turns out), it's pretty annoying not to be able to reach that option in the context menu.

As an aside, we might also consider reordering the options in the context menu such that the most commonly used appear first.

[turt2live]

sticker packs should now be fixed with an independent change

@lampholder this is not the case right now. Easily reproduced by collapsing the room member list (and having a somewhat narrow monitor).

[rxl881]

@turt2live - It is not the long term solution, but hopefully this really has been fixed / made better for sticker packs at least in https://github.com/matrix-org/matrix-react-sdk/pull/1903.

[turt2live]

Yup! Sticker packs fixed, now we just need the long-term wider fix 😇

[richvdh]

This is quite annoying.

[turt2live]

🎉 THANK YOU

[lukebarnard1]

Hm. The original issue was for the menu flowing to the right instead of left when it gets cut off. I took this issue to be mostly about downwards ctx menus. Classic case of the issue becoming more generic, which is fine.

@lampholder, should we track the original issue with the original triage?

[lampholder]

Yeah, I think this goes back to a P2 Minor now - even with the widest possible context menu content (view decrypted source) it's still _usable_ when it slips off the right hand side of the screen.

[t3chguy]

Not all cases are fixed, only the vertical is. The following still remains:

[aaronraimist]

Same for the key share ? tooltip near the bottom of the screen

[jryans]

Not all cases are fixed, only the vertical is. The following still remains:

This case is now fixed by https://github.com/matrix-org/matrix-react-sdk/pull/3087. It's unfortunately specific to that menu, so any other instances are still valid issues for now.

[passw0rd123]

Same for the encryption status icon in the textfield. It gets cut off by the browserwindow on the bottom because the content has to many lines. It's only possible to read it's content if you have several linebreaks in the textfield.