improve mobile experience

src/components/Button/index.tsx

@@ -37,7 +37,7 @@ const StyledButton = styled.button<{
   }
 
   @media only screen and (max-width: 768px) {
-    font-size: 18px;
+    font-size: 14px;
   }
 `;
 

src/components/Modal/styles.tsx

@@ -28,6 +28,11 @@ export const ModalInnerWrapper = styled.div`
   width: fit-content;
   animation: ${appearAnimation} 220ms ease-in-out;
   line-height: 20px;
+
+  @media only screen and (max-width: 768px) {
+    min-width: 90%;
+    max-width: 90%;
+  }
 `;
 
 export const Title = styled.h2`

src/components/Sidebar/index.tsx

@@ -36,7 +36,7 @@ const StyledSidebar = styled.div`
   padding: 4px;
   border-right: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
 
-  @media only screen and (max-width: 568px) {
+  @media only screen and (max-width: 768px) {
     flex-direction: row;
     width: 100%;
   }
@@ -91,7 +91,7 @@ const StyledTopWrapper = styled.nav`
     display: none;
   }
 
-  @media only screen and (max-width: 568px) {
+  @media only screen and (max-width: 768px) {
     flex-direction: row;
 
     & > div:nth-child(n + 1) {
@@ -120,7 +120,7 @@ const StyledBottomWrapper = styled.nav`
     border-top: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
   }
 
-  @media only screen and (max-width: 568px) {
+  @media only screen and (max-width: 768px) {
     display: none;
   }
 `;

src/components/Tooltip/index.tsx

@@ -42,7 +42,7 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
       transparent transparent;
   }
 
-  @media only screen and (max-width: 568px) {
+  @media only screen and (max-width: 768px) {
     display: none;
   }
 `;

src/containers/Editor/Panes.tsx

@@ -18,7 +18,7 @@ const LiveEditor = dynamic(() => import("src/containers/Editor/LiveEditor"), {
 
 const Panes: React.FC = () => {
   const hideEditor = useConfig((state) => state.hideEditor);
-  const isMobile = window.innerWidth <= 568;
+  const isMobile = window.innerWidth <= 768;
 
   return (
     <StyledEditor proportionalLayout={false} vertical={isMobile}>

src/containers/Editor/Tools.tsx

@@ -27,7 +27,7 @@ export const StyledTools = styled.div`
   color: ${({ theme }) => theme.SILVER};
   box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
 
-  @media only screen and (max-width: 568px) {
+  @media only screen and (max-width: 768px) {
     display: none;
   }
 `;

src/pages/Editor/index.tsx

@@ -10,7 +10,7 @@ export const StyledPageWrapper = styled.div`
   height: 100vh;
   width: 100%;
 
-  @media only screen and (max-width: 568px) {
+  @media only screen and (max-width: 768px) {
     position: fixed;
     height: -webkit-fill-available;
     flex-direction: column;