diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss
index 494d3ba224..8ddbe7cbf8 100644
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -38,6 +38,8 @@
   }
 
   .layer-ui__wrapper {
+    z-index: var(--zIndex-layerUI);
+
     .encrypted-icon {
       position: relative;
       margin-inline-start: 15px;
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 6c94dbd58f..16f1c5a5b6 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -48,7 +48,7 @@ export const MobileMenu = ({
 }: MobileMenuProps) => {
   const renderFixedSideContainer = () => {
     return (
-      <FixedSideContainer side="top">
+      <FixedSideContainer side="top" className="App-top-bar">
         <Section heading="shapes">
           {(heading) => (
             <Stack.Col gap={4} align="center">
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 573dba8f52..04d9a7c9d7 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -1,6 +1,12 @@
 @import "./variables.module";
 @import "./theme";
 
+:root {
+  --zIndex-canvas: 1;
+  --zIndex-wysiwyg: 2;
+  --zIndex-layerUI: 3;
+}
+
 .excalidraw {
   color: var(--text-color-primary);
   display: flex;
@@ -30,6 +36,8 @@
     image-rendering: pixelated; // chromium
     // NOTE: must be declared *after* the above
     image-rendering: -moz-crisp-edges; // FF
+
+    z-index: var(--zIndex-canvas);
   }
 
   &.Appearance_dark {
@@ -216,6 +224,10 @@
     }
   }
 
+  .App-top-bar {
+    z-index: var(--zIndex-layerUI);
+  }
+
   .App-bottom-bar {
     position: absolute;
     top: 0;
diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
index c855766542..26773506e9 100644
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -89,9 +89,6 @@ export const textWysiwyg = ({
   editable.dataset.type = "wysiwyg";
   // prevent line wrapping on Safari
   editable.wrap = "off";
-  editable.className = `excalidraw ${
-    appState.appearance === "dark" ? "Appearance_dark" : ""
-  }`;
 
   Object.assign(editable.style, {
     position: "fixed",
@@ -107,6 +104,8 @@ export const textWysiwyg = ({
     overflow: "hidden",
     // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
     whiteSpace: "pre",
+    // must be specified because in dark mode canvas creates a stacking context
+    zIndex: "var(--zIndex-wysiwyg)",
   });
 
   updateWysiwygStyle();