use absolute positioning instead of fixed (#1860)

public/app.css

@@ -8,7 +8,7 @@
 }
 
 .LoadingMessage {
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;

src/components/FixedSideContainer.css

@@ -1,6 +1,6 @@
 .FixedSideContainer {
   --margin: 0.25rem;
-  position: fixed;
+  position: absolute;
   pointer-events: none;
 }
 

src/components/LayerUI.tsx

@@ -224,7 +224,12 @@ const LayerUI = ({
               ))}
           </UserList>
         </div>
-        {
+      </FixedSideContainer>
+    );
+  };
+
+  const renderBottomAppMenu = () => {
+    return (
       <div
         className={`App-menu App-menu_bottom zen-mode-transition ${
           zenModeEnabled && "App-menu_bottom--transition-left"
@@ -242,8 +247,6 @@ const LayerUI = ({
           </Section>
         </Stack.Col>
       </div>
-        }
-      </FixedSideContainer>
     );
   };
 
@@ -315,6 +318,7 @@ const LayerUI = ({
         />
       )}
       {renderFixedSideContainer()}
+      {renderBottomAppMenu()}
       {
         <aside
           className={`layer-ui__wrapper__github-corner zen-mode-transition ${

src/css/styles.scss

@@ -259,13 +259,14 @@ button,
 }
 
 .App-menu_bottom {
-  position: fixed;
+  position: absolute;
   bottom: 0;
   grid-template-columns: 1fr auto 1fr;
   grid-gap: 4px;
   align-items: flex-start;
   cursor: default;
   pointer-events: none !important;
+  left: 0.25rem;
 
   &--transition-left {
     section {
@@ -394,7 +395,7 @@ button,
 }
 
 .dropdown-select__language.dropdown-select--floating {
-  position: fixed;
+  position: absolute;
   bottom: 10px;
   :root[dir="ltr"] & {
     right: 44px;
@@ -426,7 +427,7 @@ button,
 }
 
 .help-icon {
-  position: fixed;
+  position: absolute;
   cursor: pointer;
   fill: $oc-gray-6;
   bottom: 14px;
@@ -455,7 +456,7 @@ button,
 }
 
 .github-corner {
-  position: fixed;
+  position: absolute;
   top: 0;
   z-index: 2;
   :root[dir="ltr"] & {