feat: Add dynamic width calculation for carousel items based on image aspect ratio

src/app/features/room/RoomTimeline.css.ts

@@ -55,7 +55,6 @@ export const CarouselItem = style([
   DefaultReset,
   {
     flex: '0 0 auto',
-    width: `min(${toRem(380)}, 72vw)`,
     maxWidth: '100%',
   },
 ]);

src/app/features/room/RoomTimeline.tsx

@@ -404,6 +404,21 @@ const CarouselScroller = ({ children }: CarouselScrollerProps) => {
   );
 };
 
+const getCarouselItemWidth = (content: IImageContent): string => {
+  const width = content.info?.w;
+  const height = content.info?.h;
+
+  if (!width || !height || height <= 0) {
+    return 'min(24rem, 72vw)';
+  }
+
+  const aspectRatio = width / height;
+  const baseHeightRem = 22;
+  const computedWidthRem = Math.max(11, Math.min(24, baseHeightRem * aspectRatio));
+
+  return `min(${computedWidthRem}rem, 72vw)`;
+};
+
 export const getLiveTimeline = (room: Room): EventTimeline =>
   room.getUnfilteredTimelineSet().getLiveTimeline();
 
@@ -2184,7 +2199,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         ) : (
           <CarouselScroller>
             {orderedCarouselEvents.map((carouselEvent) => (
-              <Box key={carouselEvent.mEventId} className={css.CarouselItem}>
+              <Box
+                key={carouselEvent.mEventId}
+                className={css.CarouselItem}
+                style={{ width: getCarouselItemWidth(carouselEvent.content) }}
+              >
                 <MImage
                   content={carouselEvent.content}
                   renderImageContent={(props) => (