Adjust non-square preview sizes

Author: davidmz

src/components/media-links/media-link-preview.jsx

@@ -49,7 +49,7 @@ function FreeFeedMediaPreview({ id }) {
       .then((info) => {
         if (info?.mediaType === 'image' || info?.mediaType === 'video') {
           const height = 120;
-          const width = Math.max(90, (info.width / info.height) * height);
+          const width = Math.round((info.width / info.height) * height);
           setAttrs({
             src: attachmentPreviewUrl(id, 'image', width, height),
             width,
@@ -71,6 +71,7 @@ function FreeFeedMediaPreview({ id }) {
       alt=""
       width={attrs.width}
       height={attrs.height}
+      style={{ '--ar': attrs.width / attrs.height }}
       className={styles.preview}
       loading="lazy"
     />
@@ -83,8 +84,9 @@ function YouTubeMediaPreview({ url }) {
     <img
       src={`https://img.youtube.com/vi/${getVideoId(url)}/default.jpg`}
       alt=""
-      width={60 / aspectRatio}
+      width={Math.round(60 / aspectRatio)}
       height={60}
+      style={{ '--ar': 1 / aspectRatio }}
       className={styles.preview}
       loading="lazy"
     />

src/components/media-links/media-link-preview.module.scss

@@ -1,6 +1,8 @@
 .preview {
   height: 4em;
   width: auto;
+  aspect-ratio: clamp(0.8, var(--ar, 1), 1.2);
+  margin-right: 0.5em;
   object-fit: cover;
   box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.2);
 

src/components/post/comment-media-previews.module.scss

@@ -1,9 +1,6 @@
 @use '../../../styles/shared/mixins';
 
 .previews {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.33em;
   margin-left: mixins.rem(19px);
   margin-top: 0.25em;
 }