From 3ea7c7ffa03e47240c84886d0b509b6627e09c10 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 5 Sep 2023 11:01:19 +0530
Subject: [PATCH] fix mobile css

---
 src/components/Actions.tsx   | 1 -
 src/components/ToolIcon.scss | 5 +++++
 src/components/Toolbar.scss  | 5 +++++
 src/css/styles.scss          | 2 +-
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index c5fc618c6..f38e1b41c 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -286,7 +286,6 @@ export const ShapesSwitcher = ({
         );
       })}
       <div className="App-toolbar__divider" />
-      {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
 
       <DropdownMenu open={isExtraToolsMenuOpen}>
         <DropdownMenu.Trigger
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 994ee6ba5..8d9895499 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -165,6 +165,11 @@
       width: var(--lg-button-size);
       height: var(--lg-button-size);
 
+      @include isMobile {
+        width: 1.75rem;
+        height: 1.75rem;
+      }
+
       svg {
         width: var(--lg-icon-size);
         height: var(--lg-icon-size);
diff --git a/src/components/Toolbar.scss b/src/components/Toolbar.scss
index 4bd20f7b3..73bcb540e 100644
--- a/src/components/Toolbar.scss
+++ b/src/components/Toolbar.scss
@@ -16,6 +16,10 @@
       align-self: center;
       background-color: var(--default-border-color);
       margin: 0 0.25rem;
+
+      @include isMobile {
+        margin: 0;
+      }
     }
   }
 
@@ -34,5 +38,6 @@
     margin-top: 0.375rem;
     right: 0;
     min-width: 11.875rem;
+    z-index: 1;
   }
 }
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 2bb118146..f23a6c637 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -615,7 +615,7 @@
 
   .App-toolbar--mobile {
     overflow: visible;
-    max-width: 90vw;
+    max-width: 98vw;
 
     .ToolIcon__keybinding {
       display: none;