Floating Action Buttons: Move to footer container (#6297)

src/components/middle/FloatingActionButtons.module.scss

@@ -1,6 +1,5 @@
 .root {
-  --base-bottom-pos: 6rem;
+  --base-bottom-pos: 5.3125rem;
-  --translate-x: 0;
   --translate-y: 4.5rem;
 
   pointer-events: none;
@@ -9,7 +8,7 @@
   z-index: var(--z-scroll-down-button);
   right: max(1rem, env(safe-area-inset-right));
   bottom: var(--base-bottom-pos);
-  transform: translate(var(--translate-x), var(--translate-y));
+  transform: translate(0, var(--translate-y));
 
   opacity: 0;
 
@@ -25,7 +24,7 @@
   }
 
   .transform-down {
-    transform: translateY(4rem);
+    transform: translateY(3.5rem);
   }
 
   .unread {
@@ -61,25 +60,6 @@
     }
   }
 
-  @media (min-width: 1276px) {
-    --translate-x: 0;
-
-    transition: transform var(--layer-transition), opacity 0.2s ease;
-
-    :global(body.no-page-transitions) &,
-    :global(body.no-right-column-animations) & {
-      transition: none !important;
-    }
-
-    :global(body:not(.no-right-column-animations) #Main.right-column-open) & {
-      transition: transform var(--layer-transition), opacity 0.2s ease;
-    }
-
-    :global(#Main.right-column-open) & {
-      --translate-x: calc(-1 * var(--right-column-width));
-    }
-  }
-
   @media (max-width: 600px) {
     right: 0.5rem;
     bottom: 4.5rem;

src/components/middle/MiddleColumn.tsx

@@ -581,6 +581,11 @@ function MiddleColumn({
                 onIntersectPinnedMessage={renderingHandleIntersectPinnedMessage!}
               />
               <div className={footerClassName}>
+                <FloatingActionButtons
+                  withScrollDown={renderingIsScrollDownShown}
+                  canPost={renderingCanPost}
+                  withExtraShift={withExtraShift}
+                />
                 {renderingCanPost && (
                   <Composer
                     type="messageList"
@@ -710,12 +715,6 @@ function MiddleColumn({
                 {IS_TRANSLATION_SUPPORTED && <ChatLanguageModal isOpen={isChatLanguageModalOpen} />}
               </div>
             </Transition>
-
-            <FloatingActionButtons
-              withScrollDown={renderingIsScrollDownShown}
-              canPost={renderingCanPost}
-              withExtraShift={withExtraShift}
-            />
           </div>
           <MiddleSearch isActive={Boolean(hasActiveMiddleSearch)} />
         </>