Handle media > 2 taking a lot of vertical space

Also handle media > 4, which I think some instances probably allow

src/components/status.css

@@ -277,6 +277,10 @@
   gap: 2px;
   flex-direction: row;
 }
+.status:not(.large) .media-container.media-gt4 {
+  flex-wrap: nowrap;
+  overflow: auto;
+}
 .status .media {
   flex-grow: 1;
   flex-basis: calc(50% - 8px);
@@ -286,6 +290,12 @@
   min-height: 80px;
   border: 1px solid var(--outline-color);
 }
+.status .media-container.media-gt2 .media {
+  aspect-ratio: 1 / 1;
+}
+.status:not(.large) .media-container.media-gt4 .media {
+  min-width: 80px;
+}
 .status .media:hover {
   border-color: var(--outline-hover-color);
 }

src/components/status.jsx

@@ -406,7 +406,11 @@ function Status({
             </button>
           )}
           {!!mediaAttachments.length && (
-            <div class="media-container">
+            <div
+              class={`media-container ${
+                mediaAttachments.length > 2 ? 'media-gt2' : ''
+              } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
+            >
               {mediaAttachments.map((media, i) => (
                 <Media
                   media={media}