From f4f9b3fa265df95ade97625cf2f870ded0825eb1 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 9 Apr 2018 19:43:31 +0300
Subject: small fixes

---
 src/components/notifications/notifications.scss | 97 +++++++++++++++++--------
 1 file changed, 66 insertions(+), 31 deletions(-)

(limited to 'src/components/notifications/notifications.scss')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3c500b36..73a70a14 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -30,22 +30,52 @@
   }
 
   .notification {
-    // Will have to use pixels here to ensure consistent distance with
-    // pad alone and pad + border, browsers bad at rounding this with em,
-    // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
-    // which does not happen with 10px vs 4px + 6px.
-    padding: 0.4em 0 0 10px;
+    padding-left: 4px;
+    box-sizing: border-box;
     display: flex;
     border-bottom: 1px solid;
     border-bottom-color: inherit;
 
+    .non-mention {
+      display: flex;
+      flex: 1;
+      flex-wrap: nowrap;
+      padding: 0.6em;
+      .status-el {
+        padding: 0;
+        .status-content.media-body {
+          margin: 0;
+        }
+      }
+    }
 
-    .text {
+    .status-el {
+      flex: 1;
+    }
+
+    .notification-right {
+      flex: 1;
+      margin-left: 0.8em;
+    }
+
+    .notification-details {
       min-width: 0px;
       word-wrap: break-word;
       line-height:18px;
       position: relative;
       overflow: hidden;
+      width: 100%;
+      padding: 0.5em;
+      flex: 1;
+      flex-wrap: nowrap;
+
+      .username {
+        font-weight: bolder;
+      }
+      .timeago {
+        float: right;
+        font-size: 12px;
+      }
 
       .icon-retweet.lit {
         color: $green;
@@ -79,7 +109,6 @@
         }
       }
 
-      padding: 0.3em 0.8em 0.5em;
       p {
         margin: 0;
         margin-top: 0;
@@ -87,29 +116,6 @@
       }
     }
 
-    .avatar {
-      margin-top: 0.3em;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      overflow: hidden;
-      line-height: 0;
-
-      &.animated::before {
-        display: none;
-      }
-
-    }
-
-    &:hover .animated.avatar {
-      canvas {
-        display: none;
-      }
-      img {
-        visibility: visible;
-      }
-    }
-
     &:last-child {
       border-bottom: none;
       border-radius: 0 0 10px 10px;
@@ -135,6 +141,35 @@
 
   .unseen {
     border-left: 4px solid rgba(255, 16, 8, 0.75);
-    padding-left: 6px;
+    padding-left: 0px;
+  }
+}
+
+.notification {
+  .avatar-compact {
+    margin-top: 0.3em;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+    line-height: 0;
+
+    &.animated::before {
+      display: none;
+    }
+
+  }
+
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
+    }
+    img {
+      visibility: visible;
+    }
+  }
+
+  .notification-usercard {
+    margin-left: 0.8em;
   }
 }
-- 
cgit v1.2.3-70-g09d2


From c214197cee192d9ae511d145d8e28cef8ae9a0d1 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 9 Apr 2018 20:44:37 +0300
Subject: Separate notification into its own component, fix follow notification
 type

---
 src/components/notification/notification.js     | 24 +++++++++++++++++
 src/components/notification/notification.vue    | 35 +++++++++++++++++++++++++
 src/components/notifications/notifications.js   | 12 +++------
 src/components/notifications/notifications.scss | 12 +++++++--
 src/components/notifications/notifications.vue  | 29 +-------------------
 5 files changed, 73 insertions(+), 39 deletions(-)
 create mode 100644 src/components/notification/notification.js
 create mode 100644 src/components/notification/notification.vue

(limited to 'src/components/notifications/notifications.scss')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
new file mode 100644
index 00000000..3a274374
--- /dev/null
+++ b/src/components/notification/notification.js
@@ -0,0 +1,24 @@
+import Status from '../status/status.vue'
+import StillImage from '../still-image/still-image.vue'
+import UserCardContent from '../user_card_content/user_card_content.vue'
+
+const Notification = {
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  props: [
+    'notification'
+  ],
+  components: {
+    Status, StillImage, UserCardContent
+  },
+  methods: {
+    toggleUserExpanded () {
+      this.userExpanded = !this.userExpanded
+    }
+  }
+}
+
+export default Notification
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
new file mode 100644
index 00000000..74563ff9
--- /dev/null
+++ b/src/components/notification/notification.vue
@@ -0,0 +1,35 @@
+<template>
+  <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
+  <div class="non-mention" v-else>
+    <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+      <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
+    </a>
+    <div class='notification-right'>
+      <div class="base03-border usercard" v-if="userExpanded">
+        <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
+      </div>
+      <span class="notification-details">
+        <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+        <span v-if="notification.type === 'favorite'">
+          <i class="fa icon-star lit"></i>
+          <small>{{$t('notifications.favorited_you')}}</small>
+        </span>
+        <span v-if="notification.type === 'repeat'">
+          <i class="fa icon-retweet lit"></i>
+          <small>{{$t('notifications.repeated_you')}}</small>
+        </span>
+        <span v-if="notification.type === 'follow'">
+          <i class="fa icon-user-plus lit"></i>
+          <small>{{$t('notifications.followed_you')}}</small>
+        </span>
+        <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
+      </span>
+      <div class="follow-text" v-if="notification.type === 'follow'">
+        <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
+      </div>
+      <status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+    </div>
+  </div>
+</template>
+
+<script src="./notification.js"></script>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 19f767ab..f8314bfc 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,14 +1,11 @@
-import Status from '../status/status.vue'
-import StillImage from '../still-image/still-image.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import Notification from '../notification/notification.vue'
 
 import { sortBy, take, filter } from 'lodash'
 
 const Notifications = {
   data () {
     return {
-      visibleNotificationCount: 10,
-      userExpanded: false
+      visibleNotificationCount: 20
     }
   },
   computed: {
@@ -29,7 +26,7 @@ const Notifications = {
     }
   },
   components: {
-    Status, StillImage, UserCardContent
+    Notification
   },
   watch: {
     unseenCount (count) {
@@ -43,9 +40,6 @@ const Notifications = {
   methods: {
     markAsSeen () {
       this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
-    },
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
     }
   }
 }
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 73a70a14..b0136426 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -41,7 +41,11 @@
       flex: 1;
       flex-wrap: nowrap;
       padding: 0.6em;
+      min-width: 0;
       .status-el {
+        .status {
+          padding: 0.25em 0;
+        }
         padding: 0;
         .status-content.media-body {
           margin: 0;
@@ -49,13 +53,18 @@
       }
     }
 
+    .follow-text {
+      padding: 0.5em 0;
+    }
+
     .status-el {
       flex: 1;
     }
 
     .notification-right {
       flex: 1;
-      margin-left: 0.8em;
+      padding-left: 0.8em;
+      min-width: 0;
     }
 
     .notification-details {
@@ -65,7 +74,6 @@
       position: relative;
       overflow: hidden;
       width: 100%;
-      padding: 0.5em;
       flex: 1;
       flex-wrap: nowrap;
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 99f00032..71fd2604 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -8,34 +8,7 @@
       </div>
       <div class="panel-body base03-border">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
-          <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
-          <div class="non-mention" v-else>
-            <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-              <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
-            </a>
-            <div class='notification-right'>
-              <div class="base03-border usercard" v-if="userExpanded">
-                <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
-              </div>
-              <span class="notification-details">
-                <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <span v-if="notification.type === 'favorite'">
-                  <i class="fa icon-star lit"></i>
-                  <small>{{$t('notifications.favorited_you')}}</small>
-                </span>
-                <span v-if="notification.type === 'repeat'">
-                  <i class="fa icon-retweet lit"></i>
-                  <small>{{$t('notifications.repeated_you')}}</small>
-                </span>
-                <span v-if="notification.type === 'follow'">
-                  <i class="fa icon-user-plus lit"></i>
-                  <small>{{$t('notifications.followed_you')}}</small>
-                </span>
-                <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-              </span>
-              <status class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
-            </div>
-          </div>
+          <notification :notification="notification"></notification>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3-70-g09d2


From 6a5116c349509c160c424b6e0fe8c17ece9a3417 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 10 Apr 2018 19:25:24 +0300
Subject: Fixes to notification style issues mostly

---
 src/App.scss                                    |   5 +
 src/components/notification/notification.vue    |  34 ++--
 src/components/notifications/notifications.scss | 248 ++++++++++++------------
 src/components/status/status.vue                |  12 +-
 4 files changed, 159 insertions(+), 140 deletions(-)

(limited to 'src/components/notifications/notifications.scss')

diff --git a/src/App.scss b/src/App.scss
index e4b02017..5f03e2a1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -391,6 +391,11 @@ nav {
   }
 }
 
+.faint {
+  color: $fallback--faint;
+  color: var($fallback--faint, --faint);
+}
+
 @media all and (max-width: 959px) {
   .mobile-hidden {
     display: none;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 74563ff9..eed598a8 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,33 +1,35 @@
 <template>
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
   <div class="non-mention" v-else>
-    <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+    <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
       <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <div class="base03-border usercard" v-if="userExpanded">
+      <div class="usercard notification-usercard" v-if="userExpanded">
         <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
       </div>
       <span class="notification-details">
-        <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-        <span v-if="notification.type === 'favorite'">
-          <i class="fa icon-star lit"></i>
-          <small>{{$t('notifications.favorited_you')}}</small>
-        </span>
-        <span v-if="notification.type === 'repeat'">
-          <i class="fa icon-retweet lit"></i>
-          <small>{{$t('notifications.repeated_you')}}</small>
-        </span>
-        <span v-if="notification.type === 'follow'">
-          <i class="fa icon-user-plus lit"></i>
-          <small>{{$t('notifications.followed_you')}}</small>
-        </span>
+        <div class="name-and-action">
+          <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+          <span v-if="notification.type === 'favorite'">
+            <i class="fa icon-star lit"></i>
+            <small>{{$t('notifications.favorited_you')}}</small>
+          </span>
+          <span v-if="notification.type === 'repeat'">
+            <i class="fa icon-retweet lit"></i>
+            <small>{{$t('notifications.repeated_you')}}</small>
+          </span>
+          <span v-if="notification.type === 'follow'">
+            <i class="fa icon-user-plus lit"></i>
+            <small>{{$t('notifications.followed_you')}}</small>
+          </span>
+        </div>
         <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
         <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
       </div>
-      <status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+      <status v-else class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
     </div>
   </div>
 </template>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 08420c86..9c9ea1d5 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -46,161 +46,167 @@
     font-size: 0.9em;
     text-align: center;
     line-height: 1.3em;
-    padding: 1px;
   }
 
-  .notification {
-    padding-left: 4px;
-    box-sizing: border-box;
-    display: flex;
-    border-bottom: 1px solid;
-    border-bottom-color: inherit;
+  .unseen {
+    border-left: 4px solid $fallback--cRed;
+    border-left: 4px solid var(--cRed, $fallback--cRed);
+    padding-left: 0;
+  }
+}
 
-    .non-mention {
-      display: flex;
-      flex: 1;
-      flex-wrap: nowrap;
-      padding: 0.6em;
-      min-width: 0;
-      .status-el {
-        .status {
-          padding: 0.25em 0;
-        }
-        padding: 0;
-        .status-content.media-body {
-          margin: 0;
-        }
-      }
-    }
+.notification {
+  box-sizing: border-box;
+  display: flex;
+  border-bottom: 1px solid;
+  border-bottom-color: inherit;
+  padding-left: 4px;
 
-    .follow-text {
-      padding: 0.5em 0;
-    }
+  .avatar-compact {
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    overflow: hidden;
+    line-height: 0;
 
-    .status-el {
-      flex: 1;
+    &.animated::before {
+      display: none;
     }
+  }
 
-    time {
-      white-space: nowrap;
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
     }
-
-    .notification-right {
-      flex: 1;
-      padding-left: 0.8em;
-      min-width: 0;
+    img {
+      visibility: visible;
     }
+  }
 
-    .notification-details {
-      min-width: 0px;
-      word-wrap: break-word;
-      line-height:18px;
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      flex: 1;
-      flex-wrap: nowrap;
+  .notification-usercard {
+    margin: 0;
+  }
 
-      .username {
-        font-weight: bolder;
+  .non-mention {
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+    padding: 0.6em;
+    min-width: 0;
+    .avatar-container {
+      width: 32px;
+      height: 32px;
+    }
+    .status-el {
+      .status {
+        padding: 0.25em 0;
+        color: $fallback--faint;
+        color: var($fallback--faint, --faint);
       }
-      .timeago {
-        float: right;
-        font-size: 12px;
+      padding: 0;
+      .status-content.media-body {
+        margin: 0;
       }
+    }
+  }
 
-      .icon-retweet.lit {
-        color: $fallback--cGreen;
-        color: var(--cGreen, $fallback--cGreen);
-      }
+  .follow-text {
+    padding: 0.5em 0;
+  }
 
-      .icon-user-plus.lit {
-        color: $fallback--cBlue;
-        color: var(--cBlue, $fallback--cBlue);
-      }
+  .status-el {
+    flex: 1;
+  }
 
-      .icon-reply.lit {
-        color: $fallback--cBlue;
-        color: var(--cBlue, $fallback--cBlue);
-      }
+  time {
+    white-space: nowrap;
+  }
 
-      .icon-star.lit {
-        color: orange;
-        color: $fallback--cOrange;
-        color: var(--cOrange, $fallback--cOrange);
-      }
+  .notification-right {
+    flex: 1;
+    padding-left: 0.8em;
+    min-width: 0;
+  }
 
-      .status-content {
-        margin: 0;
-        max-height: 300px;
-      }
+  .notification-details {
+    min-width: 0px;
+    word-wrap: break-word;
+    line-height:18px;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-wrap: nowrap;
 
-      h1 {
-        word-break: break-all;
-        margin: 0 0 0.3em;
-        padding: 0;
-        font-size: 1em;
-        line-height:20px;
-        small {
-          font-weight: lighter;
-        }
-      }
+    .name-and-action {
+      flex: 1;
+    }
 
-      p {
-        margin: 0;
-        margin-top: 0;
-        margin-bottom: 0.3em;
-      }
+    .username {
+      font-weight: bolder;
+    }
+    .timeago {
+      float: right;
+      font-size: 12px;
     }
 
-    &:last-child {
-      border-bottom: none;
+    .icon-retweet.lit {
+      color: $fallback--cGreen;
+      color: var(--cGreen, $fallback--cGreen);
     }
-  }
 
-  .notification-content {
-    max-height: 12em;
-    overflow-y: hidden;
-    //text-overflow: ellipsis;
+    .icon-user-plus.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
 
-    img {
-        object-fit: contain;
+    .icon-reply.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
     }
-  }
 
-  .unseen {
-    border-left: 4px solid $fallback--cRed;
-    border-left: 4px solid var(--cRed, $fallback--cRed);
-    padding-left: 6px;
-  }
-}
+    .icon-star.lit {
+      color: orange;
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
+    }
 
-.notification {
-  .avatar-compact {
-    margin-top: 0.3em;
-    width: 32px;
-    height: 32px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    overflow: hidden;
-    line-height: 0;
+    .status-content {
+      margin: 0;
+      max-height: 300px;
+    }
 
-    &.animated::before {
-      display: none;
+    h1 {
+      word-break: break-all;
+      margin: 0 0 0.3em;
+      padding: 0;
+      font-size: 1em;
+      line-height:20px;
+      small {
+        font-weight: lighter;
+      }
     }
 
+    p {
+      margin: 0;
+      margin-top: 0;
+      margin-bottom: 0.3em;
+    }
   }
 
-  &:hover .animated.avatar {
-    canvas {
-      display: none;
-    }
-    img {
-      visibility: visible;
-    }
+  &:last-child {
+    border-bottom: none;
   }
+}
 
-  .notification-usercard {
-    margin-left: 0.8em;
+.notification-content {
+  max-height: 12em;
+  overflow-y: hidden;
+  //text-overflow: ellipsis;
+
+  img {
+      object-fit: contain;
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4d0b6f20..0dc33311 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -10,7 +10,7 @@
     <template v-else>
       <div v-if="retweet && !noHeading" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
-        <div class="media-body">
+        <div class="media-body faint">
           <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
           <i class='fa icon-retweet retweeted'></i>
           {{$t('timeline.repeated')}}
@@ -134,12 +134,13 @@
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  margin-top: 0.5em;
-  margin-left: 1em;
+  margin-top: 0.25em;
+  margin-left: 0.5em;
   z-index: 50;
   .status {
     flex: 1;
     border: 0;
+    min-width: 15em;
   }
 }
 
@@ -439,6 +440,11 @@ a.unmute {
     width: 40px;
     height: 40px;
   }
+
+  .status .avatar-compact {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 </style>
-- 
cgit v1.2.3-70-g09d2


From 896fea7dbdedce3aea88b185565b4fdccde405bd Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 10 Apr 2018 22:12:59 +0300
Subject: Fixes from review

---
 src/App.scss                                    | 2 +-
 src/components/attachment/attachment.vue        | 9 +++++----
 src/components/notifications/notifications.scss | 2 +-
 src/components/status/status.vue                | 5 ++++-
 4 files changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/components/notifications/notifications.scss')

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;
   }
 
-- 
cgit v1.2.3-70-g09d2