From 9d230d4b81c92b826ef9e8b89cd7192f5b4c8b13 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 11 Jul 2022 19:21:03 +0530
Subject: [PATCH] fix: focus mode & dynamic panels on small screens (#1246)

---
 .../src/main.scss                             | 40 ++++----
 .../QuickSettingsMenu/FocusModeSwitch.tsx     |  2 +-
 packages/web/src/stylesheets/_focused.scss    | 94 ++++++++++---------
 3 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/packages/components/src/Packages/Themes/org.standardnotes.theme-dynamic/src/main.scss b/packages/components/src/Packages/Themes/org.standardnotes.theme-dynamic/src/main.scss
index e1972e0c7..41b0a9604 100644
--- a/packages/components/src/Packages/Themes/org.standardnotes.theme-dynamic/src/main.scss
+++ b/packages/components/src/Packages/Themes/org.standardnotes.theme-dynamic/src/main.scss
@@ -1,23 +1,25 @@
-#navigation {
-  flex: none !important;
-  width: 10px !important;
-  transition: width 0.25s;
-}
+@media screen and (min-width: 768px) {
+  #navigation {
+    flex: none !important;
+    width: 10px !important;
+    transition: width 0.25s;
+  }
 
-#navigation:hover {
-  flex: initial;
-  width: 200px !important;
-  transition: width 0.25s;
-}
+  #navigation:hover {
+    flex: initial;
+    width: 200px !important;
+    transition: width 0.25s;
+  }
 
-#items-column {
-  flex: none !important;
-  width: 270px !important;
-  transition: width 0.25s;
-}
+  #items-column {
+    flex: none !important;
+    width: 270px !important;
+    transition: width 0.25s;
+  }
 
-#items-column:hover {
-  flex: initial;
-  width: 380px !important;
-  transition: width 0.25s;
+  #items-column:hover {
+    flex: initial;
+    width: 380px !important;
+    transition: width 0.25s;
+  }
 }
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
index d7de77016..caf256c89 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -33,7 +33,7 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
   return (
     <>
       <button
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
         onClick={toggle}
       >
         <div className="flex items-center">
diff --git a/packages/web/src/stylesheets/_focused.scss b/packages/web/src/stylesheets/_focused.scss
index a426fb99d..3d1e65ee3 100644
--- a/packages/web/src/stylesheets/_focused.scss
+++ b/packages/web/src/stylesheets/_focused.scss
@@ -1,58 +1,60 @@
-.focus-mode {
-  .mac-desktop #editor-column {
-    // To offset colored circles in Mac
-    padding-top: 35px;
-  }
+@media screen and (min-width: 768px) {
+  .focus-mode {
+    .mac-desktop #editor-column {
+      // To offset colored circles in Mac
+      padding-top: 35px;
+    }
 
-  .mac-desktop #editor-column:before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 38px;
-    -webkit-app-region: drag;
-  }
+    .mac-desktop #editor-column:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 38px;
+      -webkit-app-region: drag;
+    }
 
-  #editor-title-bar {
-    display: none;
-  }
+    #editor-title-bar {
+      display: none;
+    }
 
-  #editor-menu-bar {
-    display: none;
-  }
+    #editor-menu-bar {
+      display: none;
+    }
 
-  #editor-pane-component-stack {
-    display: none;
-  }
+    #editor-pane-component-stack {
+      display: none;
+    }
 
-  #footer-bar {
-    opacity: 0.08;
-    transition: opacity 0.25s;
-  }
+    #footer-bar {
+      opacity: 0.08;
+      transition: opacity 0.25s;
+    }
 
-  #footer-bar:hover {
-    opacity: 1;
-  }
+    #footer-bar:hover {
+      opacity: 1;
+    }
 
-  #navigation,
-  #items-column {
-    will-change: opacity;
-    animation: fade-out 1.25s forwards;
-    transition: width 1.25s;
-    transition-delay: 0s;
-    width: 0px !important;
-    flex: none !important;
-  }
+    #navigation,
+    #items-column {
+      will-change: opacity;
+      animation: fade-out 1.25s forwards;
+      transition: width 1.25s;
+      transition-delay: 0s;
+      width: 0px !important;
+      flex: none !important;
+    }
 
-  #navigation:hover {
-    flex: initial;
-    width: 0px !important;
-  }
+    #navigation:hover {
+      flex: initial;
+      width: 0px !important;
+    }
 
-  #items-column:hover {
-    flex: initial;
-    width: 0px !important;
+    #items-column:hover {
+      flex: initial;
+      width: 0px !important;
+    }
   }
 }