Make items keep aspect ratio

Author: nushea

src/app/components/media/media.css.ts

@@ -4,7 +4,7 @@ import { DefaultReset } from 'folds';
 export const Image = style([
   DefaultReset,
   {
-    objectFit: 'cover',
+    objectFit: 'contain',
     width: '100%',
     height: '100%',
   },

src/app/components/message/MGallery.css.ts

@@ -7,12 +7,26 @@ export const GalleryHolder = style({
   marginTop: config.space.S200,
 });
 
-export const GalleryItem = style({
-  width: toRem(300),
-  height: toRem(200),
-  flexShrink: 0,
-  overflow: 'hidden',
-  borderRadius: config.radii.R300,
+export const GalleryItem = recipe({
+  base: [
+    DefaultReset,
+    {
+      maxWidth: toRem(450),
+      flexShrink: 0,
+      overflow: 'hidden',
+      borderRadius: config.radii.R300,
+    },
+  ],
+  variants: {
+    isImage: {
+      true: {
+        height: toRem(300),
+      },
+      false: {
+        maxHeight: toRem(300),
+      },
+    },
+  },
 });
 
 export const GalleryHolderGradient = recipe({

src/app/components/message/MGallery.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll } from 'folds';
-import type { IContent } from 'matrix-js-sdk';
+import { MsgType, type IContent } from 'matrix-js-sdk';
 import type { IGalleryContent, IGalleryItem } from '$types/matrix/common';
 import {
   getIntersectionObserverEntry,
@@ -104,7 +104,10 @@ export function MGallery({ content, renderItem, renderCaption }: MGalleryProps)
             )}
             <Box alignItems="Inherit" gap="200">
               {items.map((item, index) => (
-                <div key={item.url ?? item.file?.url ?? index} className={css.GalleryItem}>
+                <div
+                  key={item.url ?? item.file?.url ?? index}
+                  className={css.GalleryItem({ isImage: item.itemtype === MsgType.Image })}
+                >
                   {renderItem(galleryItemToContent(item), index)}
                 </div>
               ))}