From a7937681e99d5af5688a963734740c7dea1dc5bf Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Tue, 19 Jul 2022 15:44:14 +0200
Subject: [PATCH] fix: account for safe area for floating buttons on mobile
 (#5420)

---
 src/components/MobileMenu.tsx | 26 ++++++++++++++------------
 src/components/ToolIcon.scss  |  8 +++-----
 src/components/Toolbar.scss   |  1 -
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 3e68110ff1..244c7839d4 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -227,18 +227,20 @@ export const MobileMenu = ({
           ) : null}
           <footer className="App-toolbar">
             {renderAppToolbar()}
-            {appState.scrolledOutside && !appState.openMenu && (
-              <button
-                className="scroll-back-to-content"
-                onClick={() => {
-                  setAppState({
-                    ...calculateScrollCenter(elements, appState, canvas),
-                  });
-                }}
-              >
-                {t("buttons.scrollBackToContent")}
-              </button>
-            )}
+            {appState.scrolledOutside &&
+              !appState.openMenu &&
+              !appState.isLibraryOpen && (
+                <button
+                  className="scroll-back-to-content"
+                  onClick={() => {
+                    setAppState({
+                      ...calculateScrollCenter(elements, appState, canvas),
+                    });
+                  }}
+                >
+                  {t("buttons.scrollBackToContent")}
+                </button>
+              )}
           </footer>
         </Island>
       </div>
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 7057110c9f..b8031a438f 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -212,16 +212,14 @@
       }
     }
     .ToolIcon.ToolIcon__library {
-      top: 100px;
+      top: calc(var(--sat) + 100px);
     }
 
     .ToolIcon.ToolIcon__lock {
-      margin-inline-end: 0;
-      top: 60px;
+      top: calc(var(--sat) + 60px);
     }
     .ToolIcon.ToolIcon__penMode {
-      margin-inline-end: 0;
-      top: 140px;
+      top: calc(var(--sat) + 140px);
     }
   }
 
diff --git a/src/components/Toolbar.scss b/src/components/Toolbar.scss
index e6831b45b0..a70745d426 100644
--- a/src/components/Toolbar.scss
+++ b/src/components/Toolbar.scss
@@ -32,7 +32,6 @@
     }
 
     .ToolIcon.ToolIcon__lock {
-      margin-inline-end: var(--space-factor);
       &.ToolIcon_type_floating {
         margin-left: 0.1rem;
       }