fix: Distinguish subtype toggles from regular tools.

src/components/Actions.tsx

@@ -17,7 +17,7 @@ import { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-import { SubtypeShapeActions, SubtypeToggles } from "./Subtypes";
+import { SubtypeShapeActions } from "./Subtypes";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
@@ -342,7 +342,6 @@ export const ShapesSwitcher = ({
           </DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu>
-      <SubtypeToggles />
     </>
   );
 };

src/components/LayerUI.tsx

@@ -55,6 +55,7 @@ import "./Toolbar.scss";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
+import { SubtypeToggles } from "./Subtypes";
 import { LaserPointerButton } from "./LaserTool/LaserPointerButton";
 
 interface LayerUIProps {
@@ -285,6 +286,7 @@ const LayerUI = ({
                           />
                         </Stack.Row>
                       </Island>
+                      <SubtypeToggles />
                       {isCollaborating && (
                         <Island
                           style={{

src/components/MobileMenu.tsx

@@ -26,6 +26,7 @@ import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
 import { useTunnels } from "../context/tunnels";
+import { SubtypeToggles } from "./Subtypes";
 
 type MobileMenuProps = {
   appState: UIAppState;
@@ -91,6 +92,7 @@ export const MobileMenu = ({
                     />
                   </Stack.Row>
                 </Island>
+                <SubtypeToggles />
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
                   {!appState.viewModeEnabled && (

src/components/Subtypes.tsx

@@ -17,6 +17,7 @@ import {
   useExcalidrawSetAppState,
 } from "./App";
 import { ContextMenuItems } from "./ContextMenu";
+import { Island } from "./Island";
 
 export const SubtypeButton = (
   subtype: Subtype,
@@ -145,12 +146,20 @@ export const SubtypeToggles = () => {
 
   return (
     <>
-      {getSubtypeNames().map((subtype) =>
-        am.renderAction(
-          `custom.${subtype}`,
-          hasAlwaysEnabledActions(subtype) ? { onContextMenu } : {},
-        ),
-      )}
+      <Island
+        style={{
+          marginLeft: 8,
+          alignSelf: "center",
+          height: "fit-content",
+        }}
+      >
+        {getSubtypeNames().map((subtype) =>
+          am.renderAction(
+            `custom.${subtype}`,
+            hasAlwaysEnabledActions(subtype) ? { onContextMenu } : {},
+          ),
+        )}
+      </Island>
     </>
   );
 };