2 files changed, 12 insertions, 7 deletions
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5da6d495..1378e730 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -9,16 +9,16 @@
     button {
       position: absolute;
       padding: 0.1em 0.3em 0.25em 0.3em;
-      right: 0.6em;
+      right: 0.7em;
     }
   }
 
-  .unseen {
-    border-left: 4px solid rgba(255, 48, 16, 0.65);
-  }
-
   .notification {
-    padding: 0.4em 0 0 0.7em;
+    // 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;
     display: flex;
     border-bottom: 1px solid silver;
 
@@ -62,4 +62,9 @@
       border: none
     }
   }
+
+  .unseen {
+    border-left: 4px solid rgba(255, 48, 16, 0.65);
+    padding-left: 6px;
+  }
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 41c274aa..180b86a1 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -3,7 +3,7 @@
     <div class="panel panel-default base00-background">
       <div class="panel-heading base01-background base04">
         Notifications ({{unseenCount}})
-        <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+        <button @click.prevent="markAsSeen" class="base06 base02-background">Read!</button>
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>