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,29 +224,32 @@ const LayerUI = ({
               ))}
           </UserList>
         </div>
-        {
-          <div
-            className={`App-menu App-menu_bottom zen-mode-transition ${
-              zenModeEnabled && "App-menu_bottom--transition-left"
-            }`}
-          >
-            <Stack.Col gap={2}>
-              <Section heading="canvasActions">
-                <Island padding={1}>
-                  <ZoomActions
-                    renderAction={actionManager.renderAction}
-                    zoom={appState.zoom}
-                  />
-                </Island>
-                {renderEncryptedIcon()}
-              </Section>
-            </Stack.Col>
-          </div>
-        }
       </FixedSideContainer>
     );
   };
 
+  const renderBottomAppMenu = () => {
+    return (
+      <div
+        className={`App-menu App-menu_bottom zen-mode-transition ${
+          zenModeEnabled && "App-menu_bottom--transition-left"
+        }`}
+      >
+        <Stack.Col gap={2}>
+          <Section heading="canvasActions">
+            <Island padding={1}>
+              <ZoomActions
+                renderAction={actionManager.renderAction}
+                zoom={appState.zoom}
+              />
+            </Island>
+            {renderEncryptedIcon()}
+          </Section>
+        </Stack.Col>
+      </div>
+    );
+  };
+
   const renderFooter = () => (
     <footer role="contentinfo" className="layer-ui__wrapper__footer">
       <div
@@ -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"] & {