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