fix dropdown overlapping with welcome screen

packages/excalidraw/components/MobileMenu.tsx

@@ -60,16 +60,6 @@ export const MobileMenu = ({
     MainMenuTunnel,
     DefaultSidebarTriggerTunnel,
   } = useTunnels();
-  const renderToolbar = () => {
-    return (
-      <MobileToolBar
-        appState={appState}
-        app={app}
-        onHandToolToggle={onHandToolToggle}
-      />
-    );
-  };
-
   const renderAppTopBar = () => {
     if (
       appState.viewModeEnabled ||
@@ -99,13 +89,25 @@ export const MobileMenu = ({
     );
   };
 
+  const renderToolbar = () => {
+    return (
+      <MobileToolBar
+        appState={appState}
+        app={app}
+        onHandToolToggle={onHandToolToggle}
+      />
+    );
+  };
+
   return (
     <>
       {renderSidebars()}
-      <FixedSideContainer side="top" className="App-top-bar">
+      {/* welcome screen, bottom bar, and top bar all have the same z-index */}
-        {renderAppTopBar()}
+      {/* ordered in this reverse order so that top bar is on top */}
+      <div className="App-welcome-screen">
         {renderWelcomeScreen && <WelcomeScreenCenterTunnel.Out />}
-      </FixedSideContainer>
+      </div>
+
       <div
         className="App-bottom-bar"
         style={{
@@ -141,6 +143,10 @@ export const MobileMenu = ({
             )}
         </Island>
       </div>
+
+      <FixedSideContainer side="top" className="App-top-bar">
+        {renderAppTopBar()}
+      </FixedSideContainer>
     </>
   );
 };

packages/excalidraw/css/styles.scss

@@ -237,6 +237,10 @@ body.excalidraw-cursor-resize * {
     flex-direction: column;
   }
 
+  .App-welcome-screen {
+    z-index: var(--zIndex-layerUI);
+  }
+
   .App-bottom-bar {
     position: absolute;
     // account for margins
@@ -246,7 +250,7 @@ body.excalidraw-cursor-resize * {
     left: 50%;
     transform: translateX(-50%);
     --bar-padding: calc(4 * var(--space-factor));
-    z-index: 3;
+    z-index: var(--zIndex-layerUI);
     display: flex;
     flex-direction: column;