2 files changed, 15 insertions, 19 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index ccf26b79..de551611 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -23,12 +23,8 @@ const Attachment = {
     hidden () {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
-    autoHeight () {
-      if (this.type === 'image' && this.nsfw) {
-        return {
-          'min-height': '109px'
-        }
-      }
+    isEmpty () {
+      return this.type === 'html' && !this.attachment.oembed
     }
   },
   methods: {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 98cd97fb..954c46b4 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="attachment base03-border" :class="{[type]: true, loading}" :style="autoHeight">
+  <div class="attachment base03-border" :class="{[type]: true, loading}" v-show="!isEmpty">
     <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
       <img :key="nsfwImage" :src="nsfwImage"/>
     </a>
@@ -39,8 +39,19 @@
           margin: 0.5em 0.7em 0.6em 0.0em;
           align-self: flex-start;
 
+          border-style: solid;
+          border-width: 1px;
+          border-radius: 5px;
+          overflow: hidden;
+
+          // fixes small gap below video
+          &.video {
+            line-height: 0;
+          }
+
           &.html {
-            flex-basis: 100%;
+            flex-basis: 90%;
+            width: 100%;
             display: flex;
           }
 
@@ -53,7 +64,6 @@
               margin: 10px;
               padding: 5px;
               background: rgba(230,230,230,0.6);
-              border-radius: 5px;
               font-weight: bold;
               z-index: 4;
           }
@@ -61,8 +71,6 @@
           video {
               max-height: 500px;
               height: 100%;
-              border: 1px solid;
-              border-radius: 5px;
               width: 100%;
               z-index: 0;
           }
@@ -75,14 +83,9 @@
               width: 100%;
               height: 100%;
               flex: 1;
-              border: 1px solid;
-              border-radius: 5px;
           }
 
           .oembed {
-              border: 1px solid;
-              border-radius: 5px;
-              border-color: inherit;
               width: 100%;
               margin-right: 15px;
               display: flex;
@@ -117,9 +120,6 @@
               flex: 1;
 
               img {
-                  border-style: solid;
-                  border-width: 1px;
-                  border-radius: 5px;
                   object-fit: contain;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */