From 9cb677363d04ab26a89a1899d4bd189aa160e531 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 2 Oct 2023 11:14:36 -0500
Subject: [PATCH] Notifications: render ScrollTopButton in a Portal

---
 src/features/notifications/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index 794073330..8e62ffd7f 100644
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@@ -14,7 +14,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import ScrollTopButton from 'soapbox/components/scroll-top-button';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
+import { Column, Portal } from 'soapbox/components/ui';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification';
 import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 
@@ -176,11 +176,15 @@ const Notifications = () => {
   return (
     <Column ref={column} label={intl.formatMessage(messages.title)} withHeader={false}>
       {filterBarContainer}
-      <ScrollTopButton
-        onClick={handleDequeueNotifications}
-        count={totalQueuedNotificationsCount}
-        message={messages.queue}
-      />
+
+      <Portal>
+        <ScrollTopButton
+          onClick={handleDequeueNotifications}
+          count={totalQueuedNotificationsCount}
+          message={messages.queue}
+        />
+      </Portal>
+
       <PullToRefresh onRefresh={handleRefresh}>
         {scrollContainer}
       </PullToRefresh>