From e88de90ac7aaa7115891e7e15b225232f4fb747e Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 3 Sep 2021 18:31:18 +0300
Subject: [PATCH] Middle Column: Fix Scroll Down Button positioning (#1419)

---
 src/components/middle/MiddleColumn.scss     | 1 +
 src/components/middle/MiddleColumn.tsx      | 5 ++++-
 src/components/middle/ScrollDownButton.scss | 2 +-
 src/components/middle/ScrollDownButton.tsx  | 3 +++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss
index 2d4004b89..90941e34b 100644
--- a/src/components/middle/MiddleColumn.scss
+++ b/src/components/middle/MiddleColumn.scss
@@ -302,6 +302,7 @@
 .messaging-disabled {
   .mask-image-disabled & {
     box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
+    border-radius: var(--border-radius-messages);
   }
 }
 
diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx
index 54e070ee1..8ebb2d952 100644
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@@ -270,6 +270,8 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   useHistoryBack(isMobileSearchActive, closeLocalTextSearch);
   useHistoryBack(isSelectModeActive, exitMessageSelectMode);
 
+  const isMessagingDisabled = Boolean(!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason);
+
   return (
     <div
       id="MiddleColumn"
@@ -348,7 +350,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                         </Button>
                       </div>
                     )}
-                    {!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason && (
+                    {isMessagingDisabled && (
                       <div className={messagingDisabledClassName}>
                         <div className="messaging-disabled-inner">
                           <span>
@@ -370,6 +372,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
             <ScrollDownButton
               isShown={renderingIsFabShown}
               canPost={renderingCanPost}
+              withExtraShift={isMessagingDisabled || isSelectModeActive || isPinnedMessageList}
             />
           </div>
           {IS_SINGLE_COLUMN_LAYOUT && <MobileSearch isActive={Boolean(isMobileSearchActive)} />}
diff --git a/src/components/middle/ScrollDownButton.scss b/src/components/middle/ScrollDownButton.scss
index 8f22ded08..18ec4f95e 100644
--- a/src/components/middle/ScrollDownButton.scss
+++ b/src/components/middle/ScrollDownButton.scss
@@ -61,7 +61,7 @@
     opacity: 1;
     pointer-events: all;
 
-    &.no-composer {
+    &.no-composer:not(.with-extra-shift) {
       transform: translateY(4rem);
     }
   }
diff --git a/src/components/middle/ScrollDownButton.tsx b/src/components/middle/ScrollDownButton.tsx
index 141382c0e..7a889c2dd 100644
--- a/src/components/middle/ScrollDownButton.tsx
+++ b/src/components/middle/ScrollDownButton.tsx
@@ -20,6 +20,7 @@ import './ScrollDownButton.scss';
 type OwnProps = {
   isShown: boolean;
   canPost?: boolean;
+  withExtraShift?: boolean;
 };
 
 type StateProps = {
@@ -36,6 +37,7 @@ const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
   canPost,
   messageListType,
   unreadCount,
+  withExtraShift,
   focusNextReply,
 }) => {
   const lang = useLang();
@@ -65,6 +67,7 @@ const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
     'ScrollDownButton',
     isShown && 'revealed',
     !canPost && 'no-composer',
+    withExtraShift && 'with-extra-shift',
   );
 
   return (