fix: focus mode on tablet pushes editor to one side

apps/web/src/app.js

@@ -92,7 +92,7 @@ function App() {
     if (isFocusMode) {
       setShow(false);
     } else {
-      setShow(true);
+      if (!isTablet) setShow(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFocusMode]);

apps/web/src/components/editor/index.js

@@ -109,7 +109,7 @@ function Editor(props) {
       flexDirection="column"
       sx={{
         position: "relative",
-        alignSelf: isFocusMode ? "center" : "stretch",
+        alignSelf: "stretch",
         overflow: "hidden",
       }}
       flex="1 1 auto"
@@ -131,8 +131,8 @@ function Editor(props) {
             alignSelf: ["stretch", "stretch", "center"],
           }}
           animate={{
-            marginRight: isFocusMode ? "25%" : editorMargins,
-            marginLeft: isFocusMode ? "25%" : editorMargins,
+            marginRight: isFocusMode && !isTablet ? "25%" : editorMargins,
+            marginLeft: isFocusMode && !isTablet ? "25%" : editorMargins,
           }}
           transition={{ duration: 0.3, ease: "easeOut" }}
           maxWidth={isFocusMode ? "auto" : "900px"}

apps/web/src/components/editor/toolbar.js

@@ -69,8 +69,9 @@ function Toolbar(props) {
       },
       {
         title: isFocusMode ? "Normal mode" : "Focus mode",
-        icon: Icon.FocusMode,
+        icon: isFocusMode ? Icon.NormalMode : Icon.FocusMode,
         enabled: true,
+        hideOnMobile: true,
         onClick: toggleFocusMode,
       },
       {
@@ -93,6 +94,7 @@ function Toolbar(props) {
           size={18}
           onClick={() => {
             if (store.get().session.id) showToast("success", "Note saved!");
+            if (isFocusMode) toggleFocusMode();
             clearSession();
           }}
         />
@@ -115,6 +117,7 @@ function Toolbar(props) {
             title={tool.title}
             key={tool.title}
             sx={{
+              display: [tool.hideOnMobile ? "none" : "block", "block", "block"],
               color: tool.enabled ? "text" : "disabled",
               cursor: tool.enabled ? "pointer" : "not-allowed",
             }}

apps/web/src/components/navigation-menu/index.js

@@ -84,8 +84,16 @@ function NavigationMenu(props) {
       sx={{
         borderRight: "1px solid",
         borderRightColor: "border",
-        minWidth: ["85%", isSideMenuOpen ? 150 : 0, isFocusMode ? 0 : 150],
-        maxWidth: ["85%", isSideMenuOpen ? 150 : 0, isFocusMode ? 0 : 150],
+        minWidth: [
+          "85%",
+          isSideMenuOpen && !isFocusMode ? 150 : 0,
+          isFocusMode ? 0 : 150,
+        ],
+        maxWidth: [
+          "85%",
+          isSideMenuOpen && !isFocusMode ? 150 : 0,
+          isFocusMode ? 0 : 150,
+        ],
         zIndex: !isSideMenuOpen ? -1 : isMobile ? 999 : isTablet ? 1 : 1,
         height: ["100%", "auto", "auto"],
         position: ["absolute", "relative", "relative"],