Handle > 4 medias

- Mastodon now doesn't allow >4, so this is for the future or maybe the forks.
- Using grid for better control on how images lay out

src/components/status.css

@@ -280,37 +280,48 @@
 
 .status .media-container {
   margin-top: 8px;
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 1fr;
   gap: 2px;
-  flex-direction: row;
+  height: 160px;
 }
-.status:not(.large) .media-container.media-gt4 {
+.status .media-container.media-gt2 {
-  flex-wrap: nowrap;
+  height: 200px;
-  overflow: auto;
+}
+.status.large :is(.media-container, .media-container.media-gt2) {
+  height: auto;
+  max-height: 80vh;
 }
 .status .media {
-  flex-grow: 1;
-  flex-basis: calc(50% - 8px);
   border-radius: 8px;
   overflow: hidden;
-  max-height: 160px;
   min-height: 80px;
   border: 1px solid var(--outline-color);
 }
-.status .media-container.media-gt2 .media {
+.status .media:only-child {
-  aspect-ratio: 1 / 1;
+  grid-area: span 2 / span 2;
 }
-.status:not(.large) .media-container.media-gt4 .media {
+.status .media:first-child:nth-last-child(3) {
-  min-width: 80px;
+  grid-area: span 2;
 }
+
+.status:not(.large) .media-container.media-gt4 .media:last-child {
+  position: relative;
+}
+.status:not(.large) .media-container.media-gt4 .media:last-child:after {
+  content: '4+';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  place-content: center;
+  place-items: center;
+  background-color: var(--bg-faded-blur-color);
+}
+
 .status .media:hover {
   border-color: var(--outline-hover-color);
 }
-.status .media.block {
-  flex-basis: 100%;
-  max-height: auto;
-}
 .status .media :is(img, video) {
   width: 100%;
   height: 100%;

src/components/status.jsx

@@ -417,8 +417,11 @@ function Status({
                 mediaAttachments.length > 2 ? 'media-gt2' : ''
               } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
             >
-              {mediaAttachments.map((media, i) => (
+              {mediaAttachments
+                .slice(0, size === 'l' ? undefined : 4)
+                .map((media, i) => (
                   <Media
+                    key={media.id}
                     media={media}
                     onClick={(e) => {
                       e.preventDefault();