Narrow images cause message action bar to overflow timeline

[robintown]

Steps to reproduce

1. Enable message bubble layout
2. Receive any tall, narrow image
3. Hover over the image

Outcome

What did you expect?

To be able to see and interact with the entire message action bar.

What happened instead?

The message action bar overflows the timeline off to the left, causing some options to not be visible.

Operating system

NixOS unstable

Browser information

Firefox 95.0.2

URL for webapp

develop.element.io

Application version

Element version: 211f480-react-00feb248778a-js-f30be8787934 Olm version: 3.2.8

Homeserver

townsendandsmith.ml

Will you send logs?

No

[daniellekirkwood]

Hey @t3chguy - What's the question that we'd like Design to answer here?

Regardless the width of the image, the hover over menu should always be actionable. I think we need to know whether the action bar show up over-top of the left Room list, or if we move it to the right to stay in the Timeline - would you agree?

[t3chguy]

I think we need to know whether the action bar show up over-top of the left Room list, or if we move it to the right to stay in the Timeline - would you agree?

Precisely

[amshakal]

Hi, for images exceeding the action bar width, we should stick to the current solution but for images narrower than the action bar we should move it to the right and below the username/ID. Here is an example:

[t3chguy]

@amshakal the above confuses me slightly

Current MAB positioning is slightly above to not overlap the event/image/text too much:

If I apply the vertical changes it looks very strange

Also this issue not only affects the MAB but also timestamps on very narrow images, so may need more design input on that aspect too.

[daniellekirkwood]

@amshakal the above confuses me slightly

Current MAB positioning is slightly above to not overlap the event/image/text too much:

If I apply the vertical changes it looks very strange

As the MAB is only visible on Hover I think it's okay to obscure the image/content a little. It allows the user to interact with the clicks on the message (MAB, Avatar, Username) and if they want to see the content, they can mouse over elsewhere and back. It's not perfect, but let's go with it for V1 and re-raise if needed in V2.

[t3chguy]

Also this issue not only affects the MAB but also timestamps on very narrow images, so may need more design input on that aspect too.

Still needs input on this regard

[daniellekirkwood]

After discussing this issue and the technical limitations we have there are a few options:

• Do not fix for the first launch
• Spend (too much) time trying to get this to work as desired, or
• Move the MAB to be always left-aligned

@amshakal I do not think that moving the MAB to be left-aligned is an option we want to pursue right now, can you confirm?

[t3chguy]

Move the MAB to be always left-aligned

(for left-column, messages sent by the other user, can be restricted to media events too)

[daniellekirkwood]

Scratch that, we're going to right-align the MAB with a left margin

this does not solve the timestamp issue - let's not try and solve timestamp issues in this GH. We'll raise a new one just for timestamps across bubbles
edit #20609