Middle Column: Fix Scroll Down Button positioning (#1419)

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);
   }
 }
 

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)} />}

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);
     }
   }

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 (