Message List: Various fixes for bottom padding

src/components/middle/ActionMessage.tsx

@@ -31,6 +31,7 @@ type OwnProps = {
   observeIntersection?: ObserveFn;
   isEmbedded?: boolean;
   appearanceOrder?: number;
+  isLastInList?: boolean;
 };
 
 type StateProps = {
@@ -50,6 +51,7 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
   observeIntersection,
   isEmbedded,
   appearanceOrder = 0,
+  isLastInList,
   sender,
   targetUser,
   targetMessage,
@@ -98,16 +100,19 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
     return <span className="embedded-action-message">{renderText(content as string)}</span>;
   }
 
+  const className = buildClassName(
+    'ActionMessage message-list-item',
+    isFocused && !noFocusHighlight && 'focused',
+    isContextMenuShown && 'has-menu-open',
+    isLastInList && 'last-in-list',
+    transitionClassNames,
+  );
+
   return (
     <div
       ref={ref}
       id={`message${message.id}`}
-      className={buildClassName(
+      className={className}
-        'ActionMessage message-list-item',
-        isFocused && !noFocusHighlight && 'focused',
-        isContextMenuShown && 'has-menu-open',
-        transitionClassNames,
-      )}
       data-message-id={message.id}
       onMouseDown={handleBeforeContextMenu}
       onContextMenu={handleContextMenu}

src/components/middle/MessageList.scss

@@ -50,21 +50,21 @@
     .last-in-list {
       margin-bottom: 1rem;
     }
-
-    &.type-pinned {
-      .last-in-list {
-        margin-bottom: 5rem;
-
-        @media (max-width: 600px) {
-          margin-bottom: 3.75rem;
-        }
-      }
-    }
   }
 
-  &.select-mode-active {
+  &.select-mode-active, &.type-pinned {
-    .messages-container {
+    margin-bottom: 0;
-      padding-bottom: 4.75rem;
+
+    .last-in-list {
+      margin-bottom: 5.675rem;
+
+      &.ActionMessage {
+        padding-bottom: 0.075rem;
+      }
+
+      @media (max-width: 600px) {
+        margin-bottom: 4.3125rem;
+      }
     }
   }
 

src/components/middle/MessageList.tsx

@@ -609,6 +609,10 @@ function renderMessages(
     ) => {
       if (senderGroup.length === 1 && !isAlbum(senderGroup[0]) && isActionMessage(senderGroup[0])) {
         const message = senderGroup[0];
+        const isLastInList = (
+          senderGroupIndex === senderGroupsArray.length - 1
+          && dateGroupIndex === dateGroupsArray.length - 1
+        );
 
         return compact([
           message.id === memoFirstUnreadIdRef.current && unreadDivider,
@@ -617,6 +621,7 @@ function renderMessages(
             message={message}
             observeIntersection={observeIntersectionForReading}
             appearanceOrder={messageCountToAnimate - ++appearanceIndex}
+            isLastInList={isLastInList}
           />,
         ]);
       }

src/components/middle/MessageScroll.tsx

@@ -4,7 +4,6 @@ import React, {
 } from '../../lib/teact/teact';
 
 import { MESSAGE_LIST_SENSITIVE_AREA } from '../../config';
-import { IS_SAFARI } from '../../util/environment';
 import resetScroll from '../../util/resetScroll';
 import { useIntersectionObserver, useOnIntersect } from '../../hooks/useIntersectionObserver';
 import useOnChange from '../../hooks/useOnChange';
@@ -69,7 +68,7 @@ const MessageScroll: FC<OwnProps> = ({
     const { offsetHeight, scrollHeight, scrollTop } = containerRef.current!;
     const scrollBottom = scrollHeight - scrollTop - offsetHeight;
     const isNearBottom = scrollBottom <= FAB_THRESHOLD;
-    const isAtBottom = scrollBottom <= 0 || (IS_SAFARI && scrollBottom <= 1);
+    const isAtBottom = scrollBottom <= 0;
 
     onFabToggle(firstUnreadId ? !isAtBottom : !isNearBottom);
     onNotchToggle(!isAtBottom);

src/components/middle/MiddleColumn.tsx

@@ -203,7 +203,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   const footerClassName = buildClassName(
     'middle-column-footer',
     !renderingCanPost && 'no-composer',
-    renderingCanPost && isNotchShown && 'with-notch',
+    renderingCanPost && isNotchShown && !isSelectModeActive && 'with-notch',
   );
 
   return (

src/components/middle/composer/Composer.scss

@@ -2,11 +2,9 @@
   align-items: flex-end;
 
   .select-mode-active + .middle-column-footer & {
-    @media (min-width: 601px) {
+    position: absolute;
-      position: absolute;
+    padding-right: 2rem;
-      padding-right: 2rem;
+    bottom: 0;
-      bottom: 0;
-    }
 
     @media (max-width: 600px) {
       padding-right: 1rem;

src/components/middle/message/Message.scss

@@ -46,7 +46,8 @@
   }
 
   &.last-in-list {
-    margin-bottom: 0rem;
+    // Forcing extra space which is taken by the appendix and causes incorrect container height calculation
+    margin-bottom: 0.425rem;
   }
 
   &.is-in-selection-mode {