From 99fdffdab70bbd9ce2b8e3511700cbae9ef991f7 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 13 Jan 2023 00:57:25 +0530
Subject: [PATCH] fix: mobile tools positioning (#6107)

* fix: mobile tools positioning

* add var for padding

* use css var

* new line

* stupid mistake

* lint
---
 src/components/FixedSideContainer.scss | 10 ++++++----
 src/css/styles.scss                    |  4 ++--
 src/css/theme.scss                     |  1 +
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/FixedSideContainer.scss b/src/components/FixedSideContainer.scss
index 85d0ef08..a485d6d2 100644
--- a/src/components/FixedSideContainer.scss
+++ b/src/components/FixedSideContainer.scss
@@ -1,3 +1,5 @@
+@import "../css/variables.module";
+
 .excalidraw {
   .FixedSideContainer {
     position: absolute;
@@ -9,10 +11,10 @@
   }
 
   .FixedSideContainer_side_top {
-    left: 1rem;
-    top: 1rem;
-    right: 1rem;
-    bottom: 1rem;
+    left: var(--editor-container-padding);
+    top: var(--editor-container-padding);
+    right: var(--editor-container-padding);
+    bottom: var(--editor-container-padding);
     z-index: 2;
   }
 
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 42c111c3..cff9aaf9 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -541,8 +541,8 @@
 
   .mobile-misc-tools-container {
     position: absolute;
-    top: 5rem;
-    right: 0;
+    top: calc(5rem - var(--editor-container-padding));
+    right: calc(var(--editor-container-padding) * -1);
     display: flex;
     flex-direction: column;
     border: 1px solid var(--sidebar-border-color);
diff --git a/src/css/theme.scss b/src/css/theme.scss
index ebf71398..90b1bcde 100644
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -42,6 +42,7 @@
   --default-icon-size: 1rem;
   --lg-button-size: 2.25rem;
   --lg-icon-size: 1rem;
+  --editor-container-padding: 1rem;
 
   @media screen and (min-device-width: 1921px) {
     --lg-button-size: 2.5rem;