Can you add some more things to the Test Plan?

1. Testing really long images to make sure they work correctly too
2. Testing small images with normal aspect ratios, to make sure they don't get "zoomed in" to the size of the container, and instead stay the small size

Testing small images with normal aspect ratios, to make sure they don't get "zoomed in" to the size of the container, and instead stay the small size

Regarding this, the goal is to test an image with a normal aspect ratio, but one that is smaller than the max-width, so that we can guarantee that it appears correctly.

Recently I've tested this for images smaller than current min-width and min-height (all equal to 50px) and actually they are being "zoomed-in". In addition when we upload an small squared image (e.g. 30px x 30px), min-width is not maintained and we obtain something like this (image is an upload multimedia icon):

Thanks for testing those cases!

Regarding the previous comment, to fix zoomed-in small images problem, we could set min-width: inherit or min-height: inherit only when image height or width > 50px (current value for min-width/height):

// multimedia.react.js
// Remember to remove min-height: inherit from media.css!!
// ...
const elementStyle = React.useMemo(() => {
  if (!dimensions) {
    return undefined;
  }
  const { width, height } = dimensions;
  // Resize the image to fit in max width while preserving aspect ratio
  const calculatedWidth =
    Math.min(MAX_THUMBNAIL_HEIGHT, height) * (width / height);
  return {
    background: placeholderImage
      ? `center / cover url(${placeholderImage})`
      : undefined,
    width: `${calculatedWidth}px`, // (*)
    aspectRatio: `${width} / ${height}`,
    minWidth: height < 50 ? undefined : 'inherit', // <- change here
    minHeight: width < 50 ? undefined : 'inherit', // <- change here
  };
}, [dimensions, placeholderImage]);
// ...

However, implementing this change may lead to issues with images that have a small height and a "normal" width, such as 520x30px:

Second solution is to remove min-width and min-height entirely from .multimediaImage class (or at least from message container, we could leave min-width/height in chat input bar) and obtain something like this:

@ashoat please let me know what you think about this.

I can't see your attachments.

Ultimately, we're looking for a solution here that doesn't have any bad trade-offs:

• Aspect ratios should always be maintained. Images should be displayed with enough space for loaders
• Images that are too large should be scaled down to fit within the width constraints
• Images that are too small should be "zoomed in" to fit the minimum width/height constraints so there is space for the loaders
• Transitions between thumbhash, thumbnail, and media should be smooth. There should be no jittering or changes in dimensions during transitions
• The solution should work on all modern browsers
• The solution should work for both images and videos

Do you have any solution that works with all of these constraints? If yes, then go ahead and implement it. If no, you'll need to keep looking.

Now attachments should be visible, sorry!

Thanks for attaching! In addition to my above comments, I can leave some guidance on the image grid. The image grid is treated somewhat differently... we basically want to fit the image into the space available in the grid. For small images we can "zoom" them in, and for larger images we can "zoom" them out. Let me know if you have any questions about this, or my previous comment.

Ultimately I'm hoping you can take these requirements and find a solution that works for all of them!