Fixes from review

4 files changed, 11 insertions, 7 deletions

diff --git a/src/App.scss b/src/App.scss
index 5f03e2a1..61acc4ce 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -393,7 +393,7 @@ nav {
 
 .faint {
   color: $fallback--faint;
-  color: var($fallback--faint, --faint);
+  color: var(--faint, $fallback--faint);
 }
 
 @media all and (max-width: 959px) {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index c84a74a0..6134f8e2 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -2,7 +2,7 @@
   <div v-if="size==='hide'">
     <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
   </div>
-  <div v-else class="attachment base03-border" :class="{[type]: true, loading, 'small-attachment': isSmall}" v-show="!isEmpty">
+  <div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall}" v-show="!isEmpty">
     <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
       <img :key="nsfwImage" :src="nsfwImage"/>
     </a>
@@ -11,10 +11,10 @@
     </div>
 
     <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank">
-      <StillImage :class="{'small': isSmall}" class="base03-border" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+      <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
-    <video :class="{'small': isSmall}" class="base03" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video>
+    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video>
 
     <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 
@@ -61,6 +61,7 @@
     flex: 1 0 30%;
     margin: 0.5em 0.7em 0.6em 0.0em;
     align-self: flex-start;
+    line-height: 0;
 
     border-style: solid;
     border-width: 1px;
@@ -109,7 +110,7 @@
   }
 
   img.media-upload {
-    margin-bottom: -2px;
+    line-height: 0;
     max-height: 300px;
     max-width: 100%;
   }
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 9c9ea1d5..65ab7f5e 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -136,7 +136,7 @@
     position: relative;
     overflow: hidden;
     width: 100%;
-    flex: 1;
+    flex: 1 1 0;
     display: flex;
     flex-wrap: nowrap;
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6fe61f36..885083c4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -27,7 +27,7 @@
           <div class="usercard media-body" v-if="userExpanded">
             <user-card-content :user="status.user" :switcher="false"></user-card-content>
           </div>
-          <div v-if="!noHeading" class="media-body container">
+          <div v-if="!noHeading" class="media-body container media-heading">
             <div class="media-heading-left">
               <div class="name-and-links">
                 <h4 class="user-name">{{status.user.name}}</h4>
@@ -181,6 +181,9 @@
     flex: 1;
     padding: 0;
     margin: 0 0 0.25em 0.8em;
+  }
+
+  .media-heading {
     flex-wrap: nowrap;
   }