"Send voice message" not visible when timeline is too narrow

[dkasak]

Steps to reproduce

Make the window sufficiently narrow.

Outcome

What did you expect?

The "Send voice message" function should remain available.

What happened instead?

The "Send voice message" button disappears and is not added to the ... More options menu.

Operating system

Arch Linux

Browser information

Firefox 93.0

URL for webapp

app.element.io

Homeserver

matrix.org

Will you send logs?

No

[dbkr]

Labelling A-Threads too because making the window really narrow probably isn't that common but when the composer's in the thread sidebar this will be very common, which will effectively mean you can't send voice messages in a thread.

[germain-gg]

This was discussed when we originally decided to hide it #18533 (comment)

It's non trivial to implement. Removing the good first issue label

[dkasak]

Labelling A-Threads too because making the window really narrow probably isn't that common but when the composer's in the thread sidebar this will be very common, which will effectively mean you can't send voice messages in a thread.

Probably not too common among average users, but not that far fetched either. I triggered this while having two windows tiled side-by-side in equal proportions with both sidebars (spaces and room member list) expanded.

[dud1337]

not that far fetched either

Can confirm.

Why is this hard to implement compared to the regular chat box's ... options?

[t3chguy]

The voice message UI itself is in the composer, unlike all the other options. That UI doesn't handle narrow rendering very well at all. All the other options are modal etc

[jakewb-b]

I'm bumping this to Occasional, and once Threads leaves beta I'd argue for it being frequent. For me, with Element maximised on a Macbook Pro 13inch, simply having the threads or room information panel expanded is enough to make the voice message option disappear from the overflow menu. I don't think that's an uncommon scenario.

[nadonomy]

Given the threads and composer implementations are ever evolving, and we've identified changes are quite involved— we'll struggle to get ahead on the design thinking on this.

If this elevates to the top of a team or individuals list, please bump and we can figure out the right path from there.

[dkasak]

From a design perspective, one obvious option to fix this could be to stack the voice message UI on top of the message input box when the window is too narrow to fit them side-by-side. Not sure if that's tricky to do codewise.