Merge branch 'proper-attachments' into shigusegubu

* proper-attachments:
  don't stretch columns when uploading media
  fix videos not stretching to container
  fix videos and related not having working drag controls
  fix z-indexes

src/components/attachment/attachment.scss

@@ -13,14 +13,12 @@
   border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
-  z-index: 1;
 
   .attachment-wrapper {
     flex: 1 1 auto;
     height: 100%;
     position: relative;
     overflow: hidden;
-    z-index: 2;
   }
 
   .description-container {
@@ -44,7 +42,6 @@
       left: 0;
       right: 0;
       top: 0;
-      z-index: 1;
       background: var(--popover);
       box-shadow: var(--popupShadow);
       opacity: 0;
@@ -87,11 +84,10 @@
   & .video-container {
     & .flash,
     & video {
-      max-width: 100%;
-      max-height: 100%;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
       align-self: center;
-      z-index: 0;
     }
   }
 
@@ -123,13 +119,12 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 2;
     margin-top: 0.5em;
     margin-right: 0.5em;
+    z-index: 1;
 
     .attachment-button {
       padding: 0;
-      z-index: 4;
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       text-align: center;

src/components/attachment/attachment.vue

@@ -127,7 +127,7 @@
         />
       </a>
 
-      <a
+      <span
         v-if="type === 'video' && !hidden"
         class="video-container"
         :href="attachment.url"
@@ -145,9 +145,9 @@
           class="play-icon"
           icon="play-circle"
         />
-      </a>
+      </span>
 
-      <a
+      <span
         v-if="type === 'audio' && !hidden"
         class="audio-container"
         :href="attachment.url"
@@ -162,7 +162,7 @@
           @play="$emit('play')"
           @pause="$emit('pause')"
         />
-      </a>
+      </span>
 
       <div
         v-if="type === 'html' && attachment.oembed"
@@ -183,7 +183,7 @@
         </div>
       </div>
 
-      <a
+      <span
         v-if="type === 'flash' && !hidden"
         class="flash-container"
         :href="attachment.url"
@@ -196,7 +196,7 @@
           @playerOpened="setFlashLoaded(true)"
           @playerClosed="setFlashLoaded(false)"
         />
-      </a>
+      </span>
     </div>
     <div
       v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"

src/components/gallery/gallery.vue

@@ -166,7 +166,7 @@
       display: grid;
       grid-column-gap: 0.5em;
       grid-row-gap: 0.5em;
-      grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
 
       .gallery-item {
         margin: 0;