From 46c0dcb94544a19e637563221af06b644d2a3817 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 27 Nov 2024 20:33:28 +0400
Subject: [PATCH] FAB: Scroll button not showing next to the Sponsored Message
 (#5161)

---
 src/components/middle/MessageListContent.tsx   | 18 +++++++++---------
 src/components/middle/hooks/useScrollHooks.ts  |  8 ++++----
 .../middle/message/SponsoredMessage.tsx        |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/middle/MessageListContent.tsx b/src/components/middle/MessageListContent.tsx
index 4c8986224..0b61f700c 100644
--- a/src/components/middle/MessageListContent.tsx
+++ b/src/components/middle/MessageListContent.tsx
@@ -296,15 +296,6 @@ const MessageListContent: FC<OwnProps> = ({
       {withHistoryTriggers && <div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" />}
       {shouldRenderBotInfo && <MessageListBotInfo isInMessageList key={`bot_info_${chatId}`} chatId={chatId} />}
       {dateGroups.flat()}
-      {areAdsEnabled && isViewportNewest && (
-        <SponsoredMessage
-          key={chatId}
-          chatId={chatId}
-          containerRef={containerRef}
-          observeIntersectionForLoading={observeIntersectionForLoading}
-          observeIntersectionForPlaying={observeIntersectionForPlaying}
-        />
-      )}
       {withHistoryTriggers && (
         <div
           ref={forwardsTriggerRef}
@@ -317,6 +308,15 @@ const MessageListContent: FC<OwnProps> = ({
         key="fab-trigger"
         className="fab-trigger"
       />
+      {areAdsEnabled && isViewportNewest && (
+        <SponsoredMessage
+          key={chatId}
+          chatId={chatId}
+          containerRef={containerRef}
+          observeIntersectionForLoading={observeIntersectionForLoading}
+          observeIntersectionForPlaying={observeIntersectionForPlaying}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/middle/hooks/useScrollHooks.ts b/src/components/middle/hooks/useScrollHooks.ts
index 5c3d0f7c1..2c468e00c 100644
--- a/src/components/middle/hooks/useScrollHooks.ts
+++ b/src/components/middle/hooks/useScrollHooks.ts
@@ -66,12 +66,12 @@ export default function useScrollHooks(
     }
 
     const container = containerRef.current;
-    if (!container) {
-      return;
-    }
+    const fabTrigger = fabTriggerRef.current;
+    if (!container || !fabTrigger) return;
 
     const { offsetHeight, scrollHeight, scrollTop } = container;
-    const scrollBottom = Math.round(scrollHeight - scrollTop - offsetHeight);
+    const fabOffsetTop = fabTrigger.offsetTop;
+    const scrollBottom = Math.round(fabOffsetTop - scrollTop - offsetHeight);
     const isNearBottom = scrollBottom <= FAB_THRESHOLD;
     const isAtBottom = scrollBottom <= NOTCH_THRESHOLD;
 
diff --git a/src/components/middle/message/SponsoredMessage.tsx b/src/components/middle/message/SponsoredMessage.tsx
index 2e34f3215..98c96c88c 100644
--- a/src/components/middle/message/SponsoredMessage.tsx
+++ b/src/components/middle/message/SponsoredMessage.tsx
@@ -83,9 +83,9 @@ const SponsoredMessage: FC<OwnProps & StateProps> = ({
 
   const lang = useOldLang();
   // eslint-disable-next-line no-null/no-null
-  const ref = useRef<HTMLDivElement>(null);
-  // eslint-disable-next-line no-null/no-null
   const contentRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line no-null/no-null
+  const ref = useRef<HTMLDivElement>(null);
   const shouldObserve = Boolean(message);
 
   const { isMobile } = useAppLayout();