fix: Change the size of sensitive media box (#784)

It is now slightly bigger than what images in a box would look
like.

fixes #771

src/routes/_components/status/StatusMediaAttachments.html

@@ -1,5 +1,6 @@
 {#if sensitive }
-<div class={computedClass}>
+<div class={computedClass} style={customSize}>
+  <div class="status-sensitive-inner-div">
   {#if sensitiveShown}
   <button type="button"
           class="status-sensitive-media-button"
@@ -28,6 +29,7 @@
       </div>
     </button>
   {/if}
+  </div>
 </div>
 {:else}
   <MediaAttachments {mediaAttachments} {sensitive} {uuid} />
@@ -43,8 +45,18 @@
     background: none;
   }
 
+  .status-sensitive-inner-div {
+    height: 100%;
+  }
+
+  .status-sensitive-media-container.grouped-images .status-sensitive-inner-div {
+    position: absolute;
+    width: 100%;
+  }
+
   .status-sensitive-media-container.grouped-images {
     grid-area: media-grp;
+    padding-bottom: 58%;
   }
 
   .status-sensitive-media-button {
@@ -79,7 +91,9 @@
   .status-sensitive-media-container.status-sensitive-media-hidden {
     width: 100%;
     margin: 10px auto;
-    height: 200px;
+  }
+  .status-sensitive-media-container.status-sensitive-media-hidden.not-grouped-images {
+      height: 200px;
   }
 
   .status-sensitive-media-container .status-sensitive-media-warning {
@@ -123,7 +137,7 @@
     fill: var(--mask-svg-fill);
     border-radius: 2px;
     background: var(--mask-opaque-bg);
-    margin: 1px;
+    margin: 5px;
     padding: 6px 10px;
   }
   .status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg {
@@ -150,14 +164,20 @@
       computedClass: ({ sensitiveShown, $largeInlineMedia }) => classname(
         'status-sensitive-media-container',
         sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden',
-        !$largeInlineMedia && 'grouped-images'
+        $largeInlineMedia ? 'not-grouped-images' : 'grouped-images'
       ),
       mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
       sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
       sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (
         !$neverMarkMediaAsSensitive && ($markMediaAsSensitive || originalStatus.sensitive)
       ),
-      delegateKey: ({ uuid }) => `sensitive-${uuid}`
+      delegateKey: ({ uuid }) => `sensitive-${uuid}`,
+      customSize: ({ $largeInlineMedia, mediaAttachments }) => {
+        if ($largeInlineMedia || !mediaAttachments || mediaAttachments.length < 5) {
+          return ''
+        }
+        return `padding-bottom: ${Math.ceil(mediaAttachments.length / 2) * 29}%;`
+      }
     },
     methods: {
       onClickSensitiveMediaButton () {