port changes to notifications

src/components/notifications/notification_filters.vue

@@ -109,22 +109,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-
-.NotificationFilters {
-  align-self: stretch;
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
-</style>

src/components/notifications/notifications.scss

@@ -29,6 +29,26 @@
       }
     }
   }
+
+  .timeline-header-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding));
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
 }
 
 .notification {

src/components/notifications/notifications.vue

@@ -20,8 +20,11 @@
               class="badge badge-notification unseen-count"
             >{{ unseenCount }}</span>
           </div>
-          <button
+          <div
+            class="timeline-header-button"
             v-if="showScrollTop"
+          >
+            <button
               class="button-unstyled scroll-to-top-button"
               type="button"
               @click="scrollToTop"
@@ -34,6 +37,7 @@
                 />
               </FALayers>
             </button>
+          </div>
           <button
             v-if="unseenCount"
             class="button-default read-button"
@@ -42,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters />
+          <NotificationFilters class="timeline-header-button" />
         </div>
         <div class="panel-body">
           <div