Feature #2 Fix height for hidden images

A min-height isn't the most accurate way to achieve this, but it's simple enough and it works.
cdp1337 · Apr 20, 2023 · 57da110 · 57da110
1 parent b4448c2
commit 57da110
Showing 1 changed file with 7 additions and 23 deletions.
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -4,7 +4,14 @@
   gap: 2px;
   flex-wrap: wrap;
 
+  // 4-elements per row (default)
+  .media-gallery__item {
+    flex: 1 20%;
+    min-height: 4em;
+  }
+
   &[data-total-items='1'] {
+    // 1-element per row (only 1 element)
     .media-gallery__item {
       flex: 1 100%;
     }
@@ -27,29 +34,6 @@
       flex: 1 30%;
     }
   }
-
-  &[data-total-items='8'],
-  &[data-total-items='9'],
-  &[data-total-items='10'],
-  &[data-total-items='11'],
-  &[data-total-items='12'],
-  &[data-total-items='13'],
-  &[data-total-items='14'],
-  &[data-total-items='15'],
-  &[data-total-items='16'],
-  &[data-total-items='17'],
-  &[data-total-items='18'],
-  &[data-total-items='19'],
-  &[data-total-items='20'],
-  &[data-total-items='21'],
-  &[data-total-items='22'],
-  &[data-total-items='23'],
-  &[data-total-items='24'] {
-    // 4-elements per row
-    .media-gallery__item {
-      flex: 1 20%;
-    }
-  }
 }
 
 .app-body {