diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index 66e6b4b4e..eec675603 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -18,12 +18,27 @@
     grid-template-columns: 1fr 20px 1.625rem;
     padding: 0.25rem 0px;
     align-items: center;
+
+    @include isMobile {
+      max-width: 175px;
+    }
   }
 
   .color-picker__top-picks {
     display: flex;
     justify-content: space-between;
-    gap: 0.5rem;
+  }
+
+  #canvas-bg-color-picker-container {
+    .color-picker__top-picks {
+      gap: 0.5rem;
+    }
+
+    .color-picker-container {
+      @include isMobile {
+        max-width: none;
+      }
+    }
   }
 
   .color-picker__button {
diff --git a/src/components/main-menu/DefaultItems.tsx b/src/components/main-menu/DefaultItems.tsx
index 2908d6b47..3635c4411 100644
--- a/src/components/main-menu/DefaultItems.tsx
+++ b/src/components/main-menu/DefaultItems.tsx
@@ -215,7 +215,10 @@ export const ChangeCanvasBackground = () => {
       >
         {t("labels.canvasBackground")}
       </div>
-      <div style={{ padding: "0 0.625rem" }}>
+      <div
+        style={{ padding: "0 0.625rem" }}
+        id="canvas-bg-color-picker-container"
+      >
         {actionManager.renderAction("changeViewBackgroundColor")}
       </div>
     </div>
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index 45a48debe..825534fa5 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -62,7 +62,6 @@ const MainMenu = Object.assign(
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
-              // style={{ zIndex: 11 }}
               sideOffset={device.isMobile ? 20 : undefined}
               className="main-menu-content"
               onClickOutside={onClickOutside}