chore: simplify sponsored message style and scroll handler

Author: itwaze

src/components/middle/FloatingActionButtons.tsx

@@ -75,6 +75,14 @@ const FloatingActionButtons: FC<OwnProps & StateProps> = ({
     }
   }, [chatId, fetchUnreadMentions, hasUnreadMentions]);
 
+  const animateScrollToLastMessage = (container?: HTMLDivElement | null) => {
+    if (!container) return;
+    const lastMessageElement = getLastMessageElement(container);
+
+    if (!lastMessageElement) return;
+    animateScroll(container, lastMessageElement, 'end', sponsoredMessage ? FOCUS_SPONSORED_MARGIN : FOCUS_MARGIN);
+  };
+
   const handleClick = useLastCallback(() => {
     if (!isShown) return;
 
@@ -83,21 +91,13 @@ const FloatingActionButtons: FC<OwnProps & StateProps> = ({
     if (messageListType === 'pinned') {
       const container = elementRef.current?.parentElement?.querySelector<HTMLDivElement>('.MessageList.type-pinned');
 
-      if (!container) return;
-      const lastMessageElement = getLastMessageElement(container);
-
-      if (!lastMessageElement) return;
-      animateScroll(container, lastMessageElement, 'end', sponsoredMessage ? FOCUS_SPONSORED_MARGIN : FOCUS_MARGIN);
+      animateScrollToLastMessage(container);
     }
 
     if (messageListType === 'scheduled') {
       const container = elementRef.current?.parentElement?.querySelector<HTMLDivElement>('.MessageList.type-scheduled');
 
-      if (!container) return;
-      const lastMessageElement = getLastMessageElement(container);
-
-      if (!lastMessageElement) return;
-      animateScroll(container, lastMessageElement, 'end', FOCUS_MARGIN);
+      animateScrollToLastMessage(container);
     }
   });
 

src/components/middle/MessageList.scss

@@ -76,24 +76,34 @@
     }
   }
 
+  @mixin last-element-margin {
+    margin-bottom: 5.625rem;
+
+    @media (max-width: 600px) {
+      margin-bottom: 4.25rem;
+    }
+  }
+
   &.select-mode-active,
   &.type-pinned {
     margin-bottom: 0;
 
     &:not(.with-sponsored-message, .is-channel, .is-group-chat),
     &.select-mode-active:not(.with-sponsored-message) {
         .last-in-list {
-          margin-bottom: 5.625rem;
-
-          @media (max-width: 600px) {
-            margin-bottom: 4.25rem;
-          }
+          @include last-element-margin;
 
           &.ActionMessage {
             padding-bottom: 0.125rem;
           }
         }
     }
+
+    &.select-mode-active {
+      .SponsoredMessage {
+        @include last-element-margin;
+      }
+    }
   }
 
   @media (max-width: 600px) {

src/components/middle/message/SponsoredMessage.scss

@@ -5,14 +5,6 @@
   margin-top: -0.5rem;
   margin-bottom: 0.5rem;
 
-  &.select-mode {
-    margin-bottom: 5.625rem;
-
-    @media (max-width: 600px) {
-      margin-bottom: 4.25rem;
-    }
-  }
-
   &::before {
     display: none;
   }