From 9d0bce40724eb77b7cc3917091b62e4ab159e29e Mon Sep 17 00:00:00 2001
From: David Roetzel <david@roetzel.de>
Date: Mon, 15 Jul 2024 15:42:47 +0200
Subject: [PATCH] Move filtered notifications bar in scrollable area (#30996)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
---
 .../mastodon/features/notifications/index.jsx         | 11 ++++++++---
 app/javascript/styles/mastodon/components.scss        |  3 +--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/javascript/mastodon/features/notifications/index.jsx b/app/javascript/mastodon/features/notifications/index.jsx
index d45f517152..54883096ef 100644
--- a/app/javascript/mastodon/features/notifications/index.jsx
+++ b/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>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index da86a4caa7..e94ce2d8f4 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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;