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( * 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;