Make max thumbnails height 200px

[rkfg]

As said in element-hq/element-web#1520, the default thumbnails size is too big. A single image easily takes half the screen or even all vertical space (on laptops) and distracts greatly. 200px height looks much better to me so that the uploaded image isn't distracting and if you want to see the details you can always click it.

Fixes element-hq/element-web#1520

[turt2live]

generally looks good from a code perspective, though the comment needs addressing.

[turt2live]

This comment block needs updating. Note that the dharma skin is the current skin.

[nadonomy]

Hey @rkfg thanks for the contribution.

While some users might find the current implementation too big, the values chosen in this PR might also be arbitrarily too small for others. Unfortunately we're not able to approve this to by merged (on behalf of @matrix-org/design).

To get this right we'll need to experiment with some different scaling options, test media of varying aspect ratio sizes, consider the impact across multiple platforms and ensure it's cohesive with the overall visual weight and rhythm of the design language.

[rkfg]

I'm open to suggestions! The current implementation doesn't fit the said visual weight and rhythm of the design in the first place. It's probably the most obvious thing among the other design choices. This issue is 4 years old and I wonder why it hasn't been addressed for this long. I even hesitate to send screenshots and photos to my chatrooms currently because I know they'd effectively wipe any text off the others' screens. I haven't seen any other messenger app that shows uploaded images this huge, they're always scaled down to not disrupt the conversation flow. Everyone I talked to was surprised to see big uploaded images and the first thing they asked is "is it possible to make them smaller?".

For example, Discord (on desktop) limits the image size by 400px width and 300px height and it looks just right to me on any resolution I've tried. Unfortunately, I couldn't find how to do the same in Riot because only the height seems to be limited.

[lc-guy]

As a community currently experimenting with switching to Matrix, with a need for a web UI: I don't know if the devs realize how terrible the defaults look. The vertical and horizontal span of every image destroys an entire page's worth of messages, disrupting the flow of conversation, and even disabling "Show previews/thumbnails for images" does nothing because you're still left with a placeholder of the same size, which is even worse.

Honestly, this is a blocking UI issue, especially when the rest of the UX is good. :/

[jryans]

Thanks for working on this in past. Based on the above feedback from the Design team, I think the best path would be to discuss on Matrix what experiments would be needed to make a change here and whether the Design team has bandwidth to advise on that.