💄 style: improve images display in chat messages

src/components/GalleyGrid/index.tsx

@@ -21,21 +21,24 @@ const GalleyGrid = memo<GalleyGridProps>(({ items, renderItem: Render }) => {
       };
     }
 
-    const firstCol = items.length % 3 === 0 ? 3 : items.length % 3;
+    const firstCol = items.length > 4 ? 3 : items.length;
 
     return {
       firstRow: items.slice(0, firstCol),
       lastRow: items.slice(firstCol, items.length),
     };
   }, [items]);
 
-  const { gap, max } = useMemo(
-    () => ({
+  const { gap, max } = useMemo(() => {
+    let scale = firstRow.length * (firstRow.length / items.length);
+
+    scale = scale < 1 ? 1 : scale;
+
+    return {
       gap: mobile ? 4 : 6,
-      max: (mobile ? MAX_SIZE_MOBILE : MAX_SIZE_DESKTOP) * firstRow.length,
-    }),
-    [mobile],
-  );
+      max: (mobile ? MAX_SIZE_MOBILE : MAX_SIZE_DESKTOP) * scale,
+    };
+  }, [mobile, items]);
 
   return (
     <Flexbox gap={gap}>
@@ -45,7 +48,7 @@ const GalleyGrid = memo<GalleyGridProps>(({ items, renderItem: Render }) => {
         ))}
       </Grid>
       {lastRow.length > 0 && (
-        <Grid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
+        <Grid col={firstRow.length} gap={gap} max={max}>
           {lastRow.map((i, index) => (
             <Render {...i} index={index} key={index} />
           ))}