From 3c4c59106af26cadc3600a19173ac895fa80d88c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 22 Dec 2022 10:47:45 +0800
Subject: [PATCH] Handle media > 2 taking a lot of vertical space

Also handle media > 4, which I think some instances probably allow
---
 src/components/status.css | 10 ++++++++++
 src/components/status.jsx |  6 +++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/status.css b/src/components/status.css
index 56c69c58..46c8194c 100644
--- a/src/components/status.css
+++ b/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);
 }
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 82027d06..d1a3f77d 100644
--- a/src/components/status.jsx
+++ b/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}