Update MobileMenu.tsx

src/components/MobileMenu.tsx

@@ -1,10 +1,9 @@
-import clsx from "clsx";
 import React from "react";
 import { AppState } from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
-import { isTextElement, showSelectedShapeActions } from "../element";
+import { showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { Island } from "./Island";
@@ -172,86 +171,70 @@ export const MobileMenu = ({
     <>
       {!viewModeEnabled && renderToolbar()}
       <div
-        className={clsx("layer-ui__wrapper", {
-          "disable-pointerEvents":
-            appState.draggingElement ||
-            appState.resizingElement ||
-            (appState.editingElement &&
-              !isTextElement(appState.editingElement)),
-        })}
+        className="App-bottom-bar"
+        style={{
+          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+        }}
       >
-        <div
-          className="App-bottom-bar"
-          style={{
-            marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-            marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-            marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-          }}
-        >
-          <Island padding={0}>
-            {appState.openMenu === "canvas" ? (
-              <Section className="App-mobile-menu" heading="canvasActions">
-                <div className="panelColumn">
-                  <Stack.Col gap={4}>
-                    {renderCanvasActions()}
-                    {renderCustomFooter?.(true, appState)}
-                    {appState.collaborators.size > 0 && (
-                      <fieldset>
-                        <legend>{t("labels.collaborators")}</legend>
-                        <UserList mobile>
-                          {Array.from(appState.collaborators)
-                            // Collaborator is either not initialized or is actually the current user.
-                            .filter(
-                              ([_, client]) => Object.keys(client).length !== 0,
-                            )
-                            .map(([clientId, client]) => (
-                              <React.Fragment key={clientId}>
-                                {actionManager.renderAction(
-                                  "goToCollaborator",
-                                  {
-                                    id: clientId,
-                                  },
-                                )}
-                              </React.Fragment>
-                            ))}
-                        </UserList>
-                      </fieldset>
-                    )}
-                  </Stack.Col>
-                </div>
-              </Section>
-            ) : appState.openMenu === "shape" &&
-              !viewModeEnabled &&
-              showSelectedShapeActions(appState, elements) ? (
-              <Section
-                className="App-mobile-menu"
-                heading="selectedShapeActions"
+        <Island padding={0}>
+          {appState.openMenu === "canvas" ? (
+            <Section className="App-mobile-menu" heading="canvasActions">
+              <div className="panelColumn">
+                <Stack.Col gap={4}>
+                  {renderCanvasActions()}
+                  {renderCustomFooter?.(true, appState)}
+                  {appState.collaborators.size > 0 && (
+                    <fieldset>
+                      <legend>{t("labels.collaborators")}</legend>
+                      <UserList mobile>
+                        {Array.from(appState.collaborators)
+                          // Collaborator is either not initialized or is actually the current user.
+                          .filter(
+                            ([_, client]) => Object.keys(client).length !== 0,
+                          )
+                          .map(([clientId, client]) => (
+                            <React.Fragment key={clientId}>
+                              {actionManager.renderAction("goToCollaborator", {
+                                id: clientId,
+                              })}
+                            </React.Fragment>
+                          ))}
+                      </UserList>
+                    </fieldset>
+                  )}
+                </Stack.Col>
+              </div>
+            </Section>
+          ) : appState.openMenu === "shape" &&
+            !viewModeEnabled &&
+            showSelectedShapeActions(appState, elements) ? (
+            <Section className="App-mobile-menu" heading="selectedShapeActions">
+              <SelectedShapeActions
+                appState={appState}
+                elements={elements}
+                renderAction={actionManager.renderAction}
+                elementType={appState.elementType}
+              />
+            </Section>
+          ) : null}
+          <footer className="App-toolbar">
+            {renderAppToolbar()}
+            {appState.scrolledOutside && !appState.openMenu && (
+              <button
+                className="scroll-back-to-content"
+                onClick={() => {
+                  setAppState({
+                    ...calculateScrollCenter(elements, appState, canvas),
+                  });
+                }}
               >
-                <SelectedShapeActions
-                  appState={appState}
-                  elements={elements}
-                  renderAction={actionManager.renderAction}
-                  elementType={appState.elementType}
-                />
-              </Section>
-            ) : null}
-            <footer className="App-toolbar">
-              {renderAppToolbar()}
-              {appState.scrolledOutside && !appState.openMenu && (
-                <button
-                  className="scroll-back-to-content"
-                  onClick={() => {
-                    setAppState({
-                      ...calculateScrollCenter(elements, appState, canvas),
-                    });
-                  }}
-                >
-                  {t("buttons.scrollBackToContent")}
-                </button>
-              )}
-            </footer>
-          </Island>
-        </div>
+                {t("buttons.scrollBackToContent")}
+              </button>
+            )}
+          </footer>
+        </Island>
       </div>
     </>
   );