fix some css problems + tiny bit cleaning up

src/App.scss

@@ -547,7 +547,10 @@ main-router {
   border-radius: var(--panelRadius, $fallback--panelRadius);
 }
 
-.panel-footer {
+/* TODO Should remove timeline-footer from here when we refactor panels into
+ * separate component and utilize slots
+ */
+.panel-footer, .timeline-footer {
   display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);

src/components/notifications/notifications.scss

@@ -1,6 +1,6 @@
 @import '../../_variables.scss';
 
-.notifications {
+.Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
     padding-bottom: 15em;
@@ -11,6 +11,10 @@
     color: var(--text, $fallback--text);
   }
 
+  .notifications-footer {
+    border: none;
+  }
+
   .notification {
     position: relative;
 
@@ -82,7 +86,6 @@
     }
   }
 
-
   .follow-text, .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;

src/components/notifications/notifications.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{ minimal: minimalMode }"
-    class="notifications"
+    class="Notifications"
   >
     <div :class="mainClass">
       <div
@@ -34,7 +34,7 @@
           <notification :notification="notification" />
         </div>
       </div>
-      <div class="panel-footer">
+      <div class="panel-footer notifications-footer">
         <div
           v-if="bottomedOut"
           class="new-status-notification text-center faint"
@@ -52,7 +52,7 @@
         </button>
         <div
           v-else
-          class="new-status-notification text-center panel-footer"
+          class="new-status-notification text-center"
         >
           <FAIcon
             icon="circle-notch"

src/components/timeline/timeline.scss

@@ -0,0 +1,31 @@
+@import '../../_variables.scss';
+
+.Timeline {
+  .loadmore-text {
+    opacity: 1;
+  }
+
+  &.-blocked {
+    cursor: progress;
+  }
+
+  .timeline-heading {
+    max-width: 100%;
+    flex-wrap: nowrap;
+    align-items: center;
+    position: relative;
+
+    .loadmore-button {
+      flex-shrink: 0;
+    }
+
+    .loadmore-text {
+      flex-shrink: 0;
+      line-height: 1em;
+    }
+  }
+
+  .timeline-footer {
+    border: none;
+  }
+}

src/components/timeline/timeline.vue

@@ -87,32 +87,4 @@
 
 <script src="./timeline.js"></script>
 
-<style lang="scss">
+<style src="./timeline.scss" lang="scss"> </style>
-@import '../../_variables.scss';
-
-.Timeline {
-  .loadmore-text {
-    opacity: 1;
-  }
-
-  &.-blocked {
-    cursor: progress;
-  }
-}
-
-.timeline-heading {
-  max-width: 100%;
-  flex-wrap: nowrap;
-  align-items: center;
-  position: relative;
-
-  .loadmore-button {
-    flex-shrink: 0;
-  }
-
-  .loadmore-text {
-    flex-shrink: 0;
-    line-height: 1em;
-  }
-}
-</style>