fix: focus mode & dynamic panels on small screens (#1246)

packages/components/src/Packages/Themes/org.standardnotes.theme-dynamic/src/main.scss

@@ -1,3 +1,4 @@
+@media screen and (min-width: 768px) {
   #navigation {
     flex: none !important;
     width: 10px !important;
@@ -21,3 +22,4 @@
     width: 380px !important;
     transition: width 0.25s;
   }
+}

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">

packages/web/src/stylesheets/_focused.scss

@@ -1,3 +1,4 @@
+@media screen and (min-width: 768px) {
   .focus-mode {
     .mac-desktop #editor-column {
       // To offset colored circles in Mac
@@ -55,6 +56,7 @@
       width: 0px !important;
     }
   }
+}
 
 .disable-focus-mode {
   #navigation,