From 627e2270769826da337c1b1a4d3ec8467404ed5f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Aug 2018 14:53:40 +0300
Subject: [PATCH] fixes hella ton of annoyances with file upload display

---
 src/components/attachment/attachment.vue      |  1 -
 .../post_status_form/post_status_form.vue     | 49 ++++++++++++++++---
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 8342f34b..d01c8566 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -38,7 +38,6 @@
 .attachments {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -0.7em;
 
   .attachment.media-upload-container {
     flex: 0 0 auto;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7aa0e7c4..ce078fe1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -65,12 +65,14 @@
         <i class="icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
-        <div class="media-upload-container attachment" v-for="file in newStatus.files">
+        <div class="media-upload-wrapper" v-for="file in newStatus.files">
           <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
-          <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
-          <video v-if="type(file) === 'video'" :src="file.image" controls></video>
-          <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
-          <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
+          <div class="media-upload-container attachment">
+            <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
+            <video v-if="type(file) === 'video'" :src="file.image" controls></video>
+            <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
+            <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
+          </div>
         </div>
       </div>
     </form>
@@ -139,14 +141,49 @@
     text-align: center;
   }
 
+  .media-upload-wrapper {
+    flex: 0 0 auto;
+    max-width: 100%;
+    min-width: 50px;
+    margin-right: .2em;
+    margin-bottom: .5em;
+
+    .icon-cancel {
+      display: inline-block;
+      position: static;
+      margin: 0;
+      padding-bottom: 0;
+      margin-left: $fallback--attachmentRadius;
+      margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
+      background-color: $fallback--btn;
+      background-color: var(--btn, $fallback--btn);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
   .attachments {
     padding: 0 0.5em;
 
     .attachment {
+      margin: 0;
       position: relative;
+      flex: 0 0 auto;
       border: 1px solid $fallback--border;
       border: 1px solid var(--border, $fallback--border);
-      margin: 0.5em 0.8em 0.2em 0;
+      text-align: center;
+
+      audio {
+        min-width: 300px;
+        flex: 1 0 auto;
+      }
+
+      a {
+        display: block;
+        text-align: left;
+        line-height: 1.2;
+        padding: .5em;
+      }
     }
 
     i {