From d3857fbb3590529131170c51d7310b4967f1780b Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Fri, 11 Mar 2022 11:41:49 +0100
Subject: [PATCH] Update MobileMenu.tsx

---
 src/components/MobileMenu.tsx | 132 +++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 64 deletions(-)

diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index a860efcab..c63e4fbfb 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -172,76 +172,80 @@ export const MobileMenu = ({
     <>
       {!viewModeEnabled && renderToolbar()}
       <div
-        className={clsx("App-bottom-bar", {
+        className={clsx("layer-ui__wrapper", {
           "disable-pointerEvents":
             appState.draggingElement ||
             appState.resizingElement ||
             (appState.editingElement &&
               !isTextElement(appState.editingElement)),
         })}
-        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">
-              <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
+          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">
+                <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>
       </div>
     </>
   );