fix: prevent images being squashed in narrow message lists

Author: MartinCupela

src/components/Attachment/styling/LinkPreview.scss

@@ -90,13 +90,17 @@
     padding: 0;
 
     img {
-      height: var(--str-chat__scraped-image-height);
+      aspect-ratio: 1.91 / 1;
       width: 100%;
+      height: auto;
+      // CDN resize requires max-height to be present on this element
+      max-height: var(--str-chat__scraped-image-height);
       border-radius: 0;
     }
 
     .str-chat__message-attachment-card--header:has(.str-chat__image-placeholder) {
-      height: var(--str-chat__scraped-image-height);
+      aspect-ratio: 1.91 / 1;
+      height: auto;
 
       .str-chat__image-placeholder {
         border-radius: 0;

src/components/Attachment/styling/ModalGallery.scss

@@ -19,9 +19,8 @@
       border-radius: var(--str-chat__radius-lg);
       gap: var(--str-chat__space-2);
       width: $max-width;
-      max-width: $max-width;
-      // CDN resize requires height/max-height to be present on the img element, this rule ensures that
-      height: var(--str-chat__attachment-max-width);
+      max-width: 100%;
+      aspect-ratio: 4 / 3;
 
       .str-chat__modal-gallery__image {
         width: 100%;
@@ -97,8 +96,9 @@
         height: 100%;
         object-fit: cover;
         cursor: zoom-in;
-        // CDN resize requires max-width to be present on this element
+        // CDN resize requires max-width and max-height to be present on this element
         max-width: $max-width;
+        max-height: $max-width;
         transition: opacity 150ms ease-in-out;
       }