fix: show extra tools dropdown in mobile

src/components/Actions.tsx

@@ -231,7 +231,6 @@ export const ShapesSwitcher = ({
   appState: UIAppState;
 }) => {
   const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
-  const device = useDevice();
   return (
     <>
       {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
@@ -288,31 +287,22 @@ export const ShapesSwitcher = ({
       })}
       <div className="App-toolbar__divider" />
       {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
-      {device.isMobile ? (
+
-        <>
+      <DropdownMenu open={isExtraToolsMenuOpen}>
-          <ToolButton
+        <DropdownMenu.Trigger
-            className={clsx("Shape", { fillable: false })}
+          className="App-toolbar__extra-tools-trigger"
-            type="radio"
+          onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
-            icon={frameToolIcon}
+          title={t("toolBar.extraTools")}
-            checked={activeTool.type === "frame"}
+        >
-            name="editor-current-shape"
+          {extraToolsIcon}
-            title={`${capitalizeString(
+        </DropdownMenu.Trigger>
-              t("toolBar.frame"),
+        <DropdownMenu.Content
-            )} — ${KEYS.F.toLocaleUpperCase()}`}
+          onClickOutside={() => setIsExtraToolsMenuOpen(false)}
-            keyBindingLabel={KEYS.F.toLocaleUpperCase()}
+          onSelect={() => setIsExtraToolsMenuOpen(false)}
-            aria-label={capitalizeString(t("toolBar.frame"))}
+          className="App-toolbar__extra-tools-dropdown"
-            aria-keyshortcuts={KEYS.F.toLocaleUpperCase()}
+        >
-            data-testid={`toolbar-frame`}
+          <DropdownMenu.Item
-            onPointerDown={({ pointerType }) => {
+            onSelect={() => {
-              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
-              }
-            }}
-            onChange={({ pointerType }) => {
-              trackEvent("toolbar", "frame", "ui");
               const nextActiveTool = updateActiveTool(appState, {
                 type: "frame",
               });
@@ -320,29 +310,16 @@ export const ShapesSwitcher = ({
                 activeTool: nextActiveTool,
                 multiElement: null,
                 selectedElementIds: {},
-                activeEmbeddable: null,
               });
             }}
-          />
+            icon={frameToolIcon}
-          <ToolButton
+            shortcut={KEYS.F.toLocaleUpperCase()}
-            className={clsx("Shape", { fillable: false })}
+            data-testid="toolbar-frame"
-            type="radio"
+          >
-            icon={EmbedIcon}
+            {t("toolBar.frame")}
-            checked={activeTool.type === "embeddable"}
+          </DropdownMenu.Item>
-            name="editor-current-shape"
+          <DropdownMenu.Item
-            title={capitalizeString(t("toolBar.embeddable"))}
+            onSelect={() => {
-            aria-label={capitalizeString(t("toolBar.embeddable"))}
-            data-testid={`toolbar-embeddable`}
-            onPointerDown={({ pointerType }) => {
-              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
-              }
-            }}
-            onChange={({ pointerType }) => {
-              trackEvent("toolbar", "embeddable", "ui");
               const nextActiveTool = updateActiveTool(appState, {
                 type: "embeddable",
               });
@@ -350,77 +327,31 @@ export const ShapesSwitcher = ({
                 activeTool: nextActiveTool,
                 multiElement: null,
                 selectedElementIds: {},
-                activeEmbeddable: null,
               });
             }}
-          />
+            icon={EmbedIcon}
-        </>
+            data-testid="toolbar-embeddable"
-      ) : (
-        <DropdownMenu open={isExtraToolsMenuOpen}>
-          <DropdownMenu.Trigger
-            className="App-toolbar__extra-tools-trigger"
-            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
-            title={t("toolBar.extraTools")}
           >
-            {extraToolsIcon}
+            {t("toolBar.embeddable")}
-          </DropdownMenu.Trigger>
+          </DropdownMenu.Item>
-          <DropdownMenu.Content
+          <DropdownMenu.Item
-            onClickOutside={() => setIsExtraToolsMenuOpen(false)}
+            onSelect={() => {
-            onSelect={() => setIsExtraToolsMenuOpen(false)}
+              const nextActiveTool = updateActiveTool(appState, {
-            className="App-toolbar__extra-tools-dropdown"
+                type: "mermaid",
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+              });
+            }}
+            icon={mermaidLogoIcon}
+            data-testid="toolbar-embeddable"
           >
-            <DropdownMenu.Item
+            {t("toolBar.mermaidToExcalidraw")}
-              onSelect={() => {
+          </DropdownMenu.Item>
-                const nextActiveTool = updateActiveTool(appState, {
+        </DropdownMenu.Content>
-                  type: "frame",
+      </DropdownMenu>
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={frameToolIcon}
-              shortcut={KEYS.F.toLocaleUpperCase()}
-              data-testid="toolbar-frame"
-            >
-              {t("toolBar.frame")}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "embeddable",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={EmbedIcon}
-              data-testid="toolbar-embeddable"
-            >
-              {t("toolBar.embeddable")}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "mermaid",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={mermaidLogoIcon}
-              data-testid="toolbar-embeddable"
-            >
-              {t("toolBar.mermaidToExcalidraw")}
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu>
-      )}
     </>
   );
 };

src/components/dropdownMenu/DropdownMenu.scss

@@ -7,8 +7,6 @@
     margin-top: 0.25rem;
 
     &--mobile {
-      bottom: 55px;
-      top: auto;
       left: 0;
       width: 100%;
       row-gap: 0.75rem;

src/css/styles.scss

@@ -278,6 +278,11 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px;
+
+    .dropdown-menu--mobile {
+      bottom: 55px;
+      top: auto;
+    }
   }
 
   .App-mobile-menu {
@@ -609,7 +614,7 @@
   }
 
   .App-toolbar--mobile {
-    overflow-x: auto;
+    overflow: visible;
     max-width: 90vw;
 
     .ToolIcon__keybinding {