MediaAttachmentGrid: improve layout as length % 2

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 (
+              return (
-              <video
+                <video
-                src={item.url || undefined}
+                  src={item.url || undefined}
-                style={style()}
+                  style={style()}
-                onLoadedMetadata={[setLoaded, true]}
+                  onLoadedMetadata={[setLoaded, true]}
-                autoplay={false}
+                  autoplay={false}
-                controls
+                  controls
-                playsinline /* or safari on iOS will play in full-screen */
+                  playsinline /* or safari on iOS will play in full-screen */
-                loop
+                  loop
-              />
+                />
-            );
+              );
 
             case "audio":
             case "unknown":