From bb3ba32dc5e66680d56b07a2d99a42b4699d385d Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 23 Nov 2024 13:53:10 +0800
Subject: [PATCH] Masonry: remove built-in column number condition

---
 src/platform/Masonry.css                    | 7 +------
 src/platform/Masonry.tsx                    | 7 +++++++
 src/timelines/toots/MediaAttachmentGrid.css | 8 ++++----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/platform/Masonry.css b/src/platform/Masonry.css
index ed6264f..0c452aa 100644
--- a/src/platform/Masonry.css
+++ b/src/platform/Masonry.css
@@ -5,12 +5,7 @@
 @supports (grid-template-rows: masonry) {
   .NativeMasonry {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(44px, min-content));
+    grid-template-columns: repeat(auto-fit, minmax(33%, min-content));
     grid-template-rows: masonry;
-
-    &:has(> :last-child:nth-child(2n)) {
-      grid-template-columns: repeat(2, minmax(auto, min-content));
-    }
   }
 }
-
diff --git a/src/platform/Masonry.tsx b/src/platform/Masonry.tsx
index 969e5dd..bd461b9 100644
--- a/src/platform/Masonry.tsx
+++ b/src/platform/Masonry.tsx
@@ -144,6 +144,13 @@ function MasonryNative<T extends MasonryContainer>(
  * and fallback to masonry-layout if not supported. The children
  * must have specified width and height.
  *
+ * Testing native behaviour:
+ * - Firefox: in `about:config`, search for `layout.css.grid-template-masonry-value.enabled`
+ *
+ * Class `NativeMasonry` will be added to the element if it's under the
+ * css masonry layout, otherwise it's `CompatMasonry`. `Masonry` is always
+ * added.
+ *
  * **Children Changes** As the children changed, reflow will be triggered,
  * and there is might be a blink (or transition) for user. If it's not your
  * intention, don't remove/add the direct children. Instead wraps them under
diff --git a/src/timelines/toots/MediaAttachmentGrid.css b/src/timelines/toots/MediaAttachmentGrid.css
index 8fd667a..0043007 100644
--- a/src/timelines/toots/MediaAttachmentGrid.css
+++ b/src/timelines/toots/MediaAttachmentGrid.css
@@ -6,7 +6,7 @@
   contain: layout style;
   gap: 4px;
 
-  > * {
+  >* {
     max-height: 35vh;
     min-height: 40px;
     min-width: 40px;
@@ -26,16 +26,16 @@
     }
   }
 
-  > * > * {
+  >*>* {
     width: 100%;
     height: 100%;
   }
 
-  > * > :where(img, video) {
+  >*> :where(img, video) {
     object-fit: contain;
   }
 
-  > * >.sensitive-placeholder {
+  >*>.sensitive-placeholder {
     display: inline-flex;
     display: inline flex;
     align-items: center;