From ec0ed1cfd8d9e6b544c6e5d36e7224647a1d0c2f Mon Sep 17 00:00:00 2001
From: KMY <tt@kmycode.net>
Date: Fri, 12 May 2023 15:47:09 +0900
Subject: [PATCH] Fix show over 5 medias on web cli

---
 app/javascript/mastodon/components/media_gallery.jsx | 2 +-
 app/javascript/styles/mastodon/components.scss       | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
index 6a55adb600..51b25199e1 100644
--- a/app/javascript/mastodon/components/media_gallery.jsx
+++ b/app/javascript/mastodon/components/media_gallery.jsx
@@ -338,7 +338,7 @@ class MediaGallery extends React.PureComponent {
     }
 
     return (
-      <div className='media-gallery' style={style} ref={this.handleRef}>
+      <div className={classNames('media-gallery', { 'media-gallery--row3': size === 5 || size === 6, 'media-gallery--row4': size === 7 || size === 8 })} style={style} ref={this.handleRef}>
         <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
           {spoilerButton}
         </div>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 78154c9c17..547047324f 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -6509,6 +6509,14 @@ a.status-card.compact:hover {
   grid-template-columns: 50% 50%;
   grid-template-rows: 50% 50%;
   gap: 2px;
+
+  &--row3 {
+    grid-template-rows: 34% 33% 33%;
+  }
+
+  &--row4 {
+    grid-template-rows: 25% 25% 25% 25%;
+  }
 }
 
 .media-gallery__item {