From 050dc1c2a3043420b31e2062a05fb9d8e39d7d3d Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 8 Oct 2024 17:43:33 +0800
Subject: [PATCH] MediaAttachmentGrid: improve layout as length % 2

---
 src/timelines/MediaAttachmentGrid.tsx | 34 +++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index a88d7a6..5748f0d 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -51,9 +51,19 @@ const MediaAttachmentGrid: Component<{
     setViewerIndex(index);
   };
 
+  const columnCount = () => {
+    if (props.attachments.length === 1) {
+      return 1;
+    } else if (props.attachments.length % 2 === 0) {
+      return 2;
+    } else {
+      return 3;
+    }
+  };
+
   css`
     .attachments {
-      column-count: ${(props.attachments.length === 1 ? 1 : 3).toString()};
+      column-count: ${columnCount.toString()};
     }
   `;
   return (
@@ -104,17 +114,17 @@ const MediaAttachmentGrid: Component<{
                 />
               );
             case "gifv": // Later we can handle the preview
-            return (
-              <video
-                src={item.url || undefined}
-                style={style()}
-                onLoadedMetadata={[setLoaded, true]}
-                autoplay={false}
-                controls
-                playsinline /* or safari on iOS will play in full-screen */
-                loop
-              />
-            );
+              return (
+                <video
+                  src={item.url || undefined}
+                  style={style()}
+                  onLoadedMetadata={[setLoaded, true]}
+                  autoplay={false}
+                  controls
+                  playsinline /* or safari on iOS will play in full-screen */
+                  loop
+                />
+              );
 
             case "audio":
             case "unknown":