fix: mobile UI and other fixes (#10177)

* remove legacy openMenu=shape state and unused actions

* close menus/popups in applicable cases when opening a different one

* split ui z-indexes to account prefer different overlap

* make top canvas area clickable on mobile

* make mobile main menu closable by clicking outside and reduce width

* offset picker popups from viewport border on mobile

* reduce items gap in mobile main menu

* show top picks for canvas bg colors in all ui modes

* fix menu separator visibility on mobile

* fix command palette items not being filtered

packages/excalidraw/components/Sidebar/Sidebar.scss

@@ -9,7 +9,7 @@
     top: 0;
     bottom: 0;
     right: 0;
-    z-index: 5;
+    z-index: var(--zIndex-ui-library);
     margin: 0;
     padding: 0;
     box-sizing: border-box;

packages/excalidraw/components/Sidebar/SidebarTrigger.tsx

@@ -30,7 +30,11 @@ export const SidebarTrigger = ({
             .querySelector(".layer-ui__wrapper")
             ?.classList.remove("animate");
           const isOpen = event.target.checked;
-          setAppState({ openSidebar: isOpen ? { name, tab } : null });
+          setAppState({
+            openSidebar: isOpen ? { name, tab } : null,
+            openMenu: null,
+            openPopup: null,
+          });
           onToggle?.(isOpen);
         }}
         checked={appState.openSidebar?.name === name}