Images in messages with different max height

[nicodh]

No description provided.

[nicodh]

I rebased that to PR #4313 for easier testing - just a proposal to avoid too small images in message list

[WofWca]

I'd say it looks better now most of the time. But perhaps 800px is a bit too much, because on common monitors such images don't fit on screen unless you have Delta Chat maximized. Maybe max-height: calc(min(60vh, 800px)) would work better.

And super small images look funny. IDK if we call it a bug or a feature:

But they're impossible to click on. Maybe min-height or min-width would help.

[WofWca]

I just discovered that the new height also applies to stickers. I suppose it shouldn't be the case.

[maxphilippov]

May I propose a different solution? If I understand the issue correctly.

deltachat-desktop/packages/frontend/src/components/attachment/messageAttachment.tsx

Line 77 in 7e56aba

return (

We have here dimensionWidth and dimensionHeight as part of message object.

We can do something like this to both handle max height and layout jumping when messages load (and maybe also add a minimum height):

    const dimensionsHeight = Math.min(message.dimensionsHeight, 200)
    const dimensionsWidth = message.dimensionsWidth * dimensionsHeight / message.dimensionsHeight

    return (
      <button
        onClick={onClickAttachment}
        className={classNames(
          'message-attachment-media',
          withCaption ? 'content-below' : null,
          withContentAbove ? 'content-above' : null
        )}
      >
        <img
          className='attachment-content'
	  width={dimensionsWidth}
	  height={dimensionsHeight}
          src={runtime.transformBlobURL(message.file)}
        />
      </button>
    )

[WofWca]

Also let's keep reactions in mind:

[nicodh]

I would suggest to merge this now, since it improves many situations. There might be a better solution, by applying various calculations but that should not be part of this PR...

[WofWca]

I'm a bit reluctant to approve this since firstly this doesn't actually fix the issue of reactions overflowing narrow image-messages, and secondly this can introduce unexpected consequences (as with stickers).
But the next release is far away, and if we're up for a bit of trial and error, then let's do it.

(FYI a changelog entry is missing)

[WofWca]

We can do something like this to both handle max height and layout jumping when messages load (and maybe also add a minimum height):

@maxphilippov Yes, layout jumping needs to be fixed, but I'd say it can be tackled separately.

Also for that I'd suggest to still utilize CSS instead of JS, and pass these JS-provided values as CSS variables.