From b21f723eee6342adb8d1634c7313750a2bfb2e9d Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Thu, 2 Jul 2020 18:57:47 +0530
Subject: [PATCH] use absolute positioning instead of fixed (#1860)

---
 public/app.css                        |  2 +-
 src/components/FixedSideContainer.css |  2 +-
 src/components/LayerUI.tsx            | 42 +++++++++++++++------------
 src/css/styles.scss                   |  9 +++---
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/public/app.css b/public/app.css
index 929a453cd..c8b1a5625 100644
--- a/public/app.css
+++ b/public/app.css
@@ -8,7 +8,7 @@
 }
 
 .LoadingMessage {
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/FixedSideContainer.css b/src/components/FixedSideContainer.css
index 1e1ab69e5..d6153e567 100644
--- a/src/components/FixedSideContainer.css
+++ b/src/components/FixedSideContainer.css
@@ -1,6 +1,6 @@
 .FixedSideContainer {
   --margin: 0.25rem;
-  position: fixed;
+  position: absolute;
   pointer-events: none;
 }
 
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 9f52b919c..3f1734517 100644
--- a/src/components/LayerUI.tsx
+++ b/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 ${
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 7d76f6d62..61a082ef8 100644
--- a/src/css/styles.scss
+++ b/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"] & {