diff --git a/src/components/status.css b/src/components/status.css index 803bc0c7..7f88042b 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -1349,6 +1349,26 @@ body:has(#modal-container .carousel) .status .media img:hover { background-color: var(--outline-color); } +.status.large .media-large-container { + width: 100%; + max-width: 100%; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + column-gap: 8px; + flex-wrap: wrap; + text-align: center; + + figure { + justify-content: center; + + figcaption { + text-align: center; + } + } +} + @keyframes media-carousel-slide { 0% { transform: translateX(calc(var(--dots-count, 1) * 2.5px)); diff --git a/src/components/status.jsx b/src/components/status.jsx index 13287d6e..f0ecc801 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -1990,50 +1990,74 @@ function Status({ {showSpoilerMedia ? 'Show less' : 'Show media'} )} - {!!mediaAttachments.length && ( - -
2 ? 'media-gt2' : ''} ${ - mediaAttachments.length > 4 ? 'media-gt4' : '' - }`} - > - {displayedMediaAttachments.map((media, i) => ( - { - onMediaClick(e, i, media, status); - } - : undefined - } - /> + {!!mediaAttachments.length && + (mediaAttachments.length > 1 && + (isSizeLarge || (withinContext && size === 'm')) ? ( +
+ {mediaAttachments.map((media, i) => ( +
+ onMediaClick(e, i, media, status) + : undefined + } + /> +
))}
- - )} + ) : ( + +
2 ? 'media-gt2' : ''} ${ + mediaAttachments.length > 4 ? 'media-gt4' : '' + }`} + > + {displayedMediaAttachments.map((media, i) => ( + { + onMediaClick(e, i, media, status); + } + : undefined + } + /> + ))} +
+
+ ))} {!!card && /^https/i.test(card?.url) && !sensitive &&