Change media attachments max 8 to 16 on web cli

app/javascript/mastodon/components/media_gallery.jsx

@@ -94,15 +94,21 @@ class Item extends React.PureComponent {
       height = 50;
     }
 
-    if (size === 5 || size === 6) {
+    if (size === 5 || size === 6 || size === 9 || size === 10 || size === 11 || size === 12) {
       height = 33;
     }
-    if (size === 7 || size === 8) {
+    if (size === 7 || size === 8 || size === 13 || size === 14 || size === 15 || size === 16) {
       height = 25;
     }
     if ((size === 5 && index === 4) || (size === 7 && index === 6)) {
       width = 100;
     }
+    if (size === 9) {
+      width = 33;
+    }
+    if (size === 10 || size === 11 || size === 12 || size === 13 || size === 14 || size === 15 || size === 16) {
+      width = 25;
+    }
 
     if (attachment.get('description')?.length > 0) {
       badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>);
@@ -310,7 +316,7 @@ class MediaGallery extends React.PureComponent {
       style.aspectRatio = '16 / 9';
     }
 
-    const maxSize = displayMediaExpand ? 8 : 4;
+    const maxSize = displayMediaExpand ? 16 : 4;
 
     const size     = media.take(maxSize).size;
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
@@ -337,8 +343,15 @@ class MediaGallery extends React.PureComponent {
       );
     }
 
+    const rowClass = (size === 5 || size === 6 || size === 9 || size === 10 || size === 11 || size === 12) ? 'media-gallery--row3' :
+      (size === 7 || size === 8 || size === 13 || size === 14 || size === 15 || size === 16) ? 'media-gallery--row4' :
+      'media-gallery--row2';
+    const columnClass = (size === 9) ? 'media-gallery--column3' :
+      (size === 10 || size === 11 || size === 12 || size === 13 || size === 14 || size === 15 || size === 16) ? 'media-gallery--column4' :
+      'media-gallery--column2';
+
     return (
-      <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('media-gallery', rowClass, columnClass)} style={style} ref={this.handleRef}>
         <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
           {spoilerButton}
         </div>

app/javascript/styles/mastodon/components.scss

@@ -6517,6 +6517,14 @@ a.status-card.compact:hover {
   &--row4 {
     grid-template-rows: 25% 25% 25% 25%;
   }
+
+  &--column3 {
+    grid-template-columns: 33% 34% 33%;
+  }
+
+  &--column4 {
+    grid-template-columns: 25% 25% 25% 25%;
+  }
 }
 
 .media-gallery__item {

config/locales/simple_form.ja.yml

@@ -60,7 +60,7 @@ ja:
         setting_display_media_hide_all: メディアを常に隠す
         setting_display_media_show_all: メディアを常に表示する
         setting_hide_network: フォローとフォロワーの情報がプロフィールページで見られないようにします
-        setting_display_media_expand: Misskeyなどは4個を超えて投稿可能です。その追加分を最大8個まで表示します。kmyblueからアップロードはできません
+        setting_display_media_expand: Misskeyなどは4個を超えて投稿可能です。その追加分を最大16個まで表示します。kmyblueからアップロードはできません
         setting_noai: AI学習への利用を禁止するメタタグをプロフィールページに追加します。ただし実効性があるとは限りません
         setting_noindex: 公開プロフィールおよび各投稿ページに影響します
         setting_public_post_to_unlisted: 未対応のサードパーティアプリからもローカル公開で投稿できますが、公開投稿はWeb以外できなくなります
@@ -221,7 +221,7 @@ ja:
         setting_disable_swiping: スワイプでの切り替えを無効にする
         setting_display_media: メディアの表示
         setting_display_media_default: 標準
-        setting_display_media_expand: 5個目以降のメディアも表示する (最大8)
+        setting_display_media_expand: 5個目以降のメディアも表示する (最大16)
         setting_display_media_hide_all: 非表示
         setting_display_media_show_all: 表示
         setting_expand_spoilers: 閲覧注意としてマークされた投稿を常に展開する