Move filtered notifications bar in scrollable area (#30996)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/mastodon/features/notifications/index.jsx

@@ -223,6 +223,13 @@ class Notifications extends PureComponent {
 
     let scrollContainer;
 
+    const prepend = (
+      <>
+        {needsNotificationPermission && <NotificationsPermissionBanner />}
+        <FilteredNotificationsBanner />
+      </>
+    );
+
     if (signedIn) {
       scrollContainer = (
         <ScrollableList
@@ -232,7 +239,7 @@ class Notifications extends PureComponent {
           showLoading={isLoading && notifications.size === 0}
           hasMore={hasMore}
           numPending={numPending}
-          prepend={needsNotificationPermission && <NotificationsPermissionBanner />}
+          prepend={prepend}
           alwaysPrepend
           emptyMessage={emptyMessage}
           onLoadMore={this.handleLoadOlder}
@@ -282,8 +289,6 @@ class Notifications extends PureComponent {
 
         {filterBarContainer}
 
-        <FilteredNotificationsBanner />
-
         {scrollContainer}
 
         <Helmet>

app/javascript/styles/mastodon/components.scss

@@ -10192,8 +10192,7 @@ noscript {
 .filtered-notifications-banner {
   display: flex;
   align-items: center;
-  border: 1px solid var(--background-border-color);
-  border-top: 0;
+  border-bottom: 1px solid var(--background-border-color);
   padding: 24px 32px;
   gap: 16px;
   color: $darker-text-color;