From 66014fcfcb386f4110ff0a6056e45e61af434ea3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:34:53 +0300
Subject: [PATCH] port changes to notifications

---
 .../notifications/notification_filters.vue    | 19 ------------
 .../notifications/notifications.scss          | 20 +++++++++++++
 .../notifications/notifications.vue           | 30 +++++++++++--------
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index b021316753..1315b51add 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/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>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index f71f9b7612..f4a3e09923 100644
--- a/src/components/notifications/notifications.scss
+++ b/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 {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 08d65439b0..22f67e654b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -20,20 +20,24 @@
               class="badge badge-notification unseen-count"
             >{{ unseenCount }}</span>
           </div>
-          <button
+          <div
+            class="timeline-header-button"
             v-if="showScrollTop"
-            class="button-unstyled scroll-to-top-button"
-            type="button"
-            @click="scrollToTop"
           >
-            <FALayers class="fa-scale-110 fa-old-padding-layer">
-              <FAIcon icon="arrow-up" />
-              <FAIcon
-                icon="minus"
-                transform="up-7"
-              />
-            </FALayers>
-          </button>
+            <button
+              class="button-unstyled scroll-to-top-button"
+              type="button"
+              @click="scrollToTop"
+            >
+              <FALayers class="fa-scale-110 fa-old-padding-layer">
+                <FAIcon icon="arrow-up" />
+                <FAIcon
+                  icon="minus"
+                  transform="up-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