mobile improvements

src/components/Graph/index.tsx

@@ -86,12 +86,9 @@ const MemoizedGraph = React.memo(function Layout({
         maxScale={1.8}
         minScale={0.4}
         initialScale={0.7}
-        wheel={{
-          step: 0.05,
-        }}
-        doubleClick={{
-          disabled: true,
-        }}
+        wheel={{ step: 0.1 }}
+        zoomAnimation={{ animationType: "linear" }}
+        doubleClick={{ disabled: true }}
       >
         <TransformComponent
           wrapperStyle={{
@@ -115,7 +112,11 @@ const MemoizedGraph = React.memo(function Layout({
               <Edge {...props} containerClassName={`edge-${props.id}`} />
             )}
             zoomable={false}
-            readonly
+            animated={false}
+            readonly={true}
+            dragEdge={null}
+            dragNode={null}
+            fit={true}
           />
         </TransformComponent>
       </TransformWrapper>

src/containers/Editor/Panes.tsx

@@ -18,8 +18,13 @@ const LiveEditor = dynamic(() => import("src/containers/Editor/LiveEditor"), {
 
 const Panes: React.FC = () => {
   const hideEditor = useConfig((state) => state.hideEditor);
+  const setConfig = useConfig((state) => state.setConfig);
   const isMobile = window.innerWidth <= 768;
 
+  React.useEffect(() => {
+    if (isMobile) setConfig("hideEditor", true);
+  }, [isMobile, setConfig]);
+
   return (
     <StyledEditor proportionalLayout={false} vertical={isMobile}>
       <Allotment.Pane
@@ -30,7 +35,10 @@ const Panes: React.FC = () => {
       >
         <JsonEditor />
       </Allotment.Pane>
-      <Allotment.Pane minSize={0} maxSize={isMobile && !hideEditor ? 0 : Infinity}>
+      <Allotment.Pane
+        minSize={0}
+        maxSize={isMobile && !hideEditor ? 0 : Infinity}
+      >
         <LiveEditor />
       </Allotment.Pane>
     </StyledEditor>

src/containers/Home/index.tsx

@@ -64,15 +64,11 @@ const Home: React.FC = () => {
           GO TO EDITOR
         </Styles.StyledButton>
 
-        {!isMobile && (
-          <>
-            <Styles.StyledSponsorButton onClick={() => setModalVisible(true)}>
-              Help JSON Crack Accomplish It&apos;s Goals
-              <FaHeart />
-            </Styles.StyledSponsorButton>
-            <GoalsModal visible={isModalVisible} setVisible={setModalVisible} />
-          </>
-        )}
+        <Styles.StyledSponsorButton onClick={() => setModalVisible(true)}>
+          Help JSON Crack&apos;s Goals
+          <FaHeart />
+        </Styles.StyledSponsorButton>
+        <GoalsModal visible={isModalVisible} setVisible={setModalVisible} />
       </Styles.StyledHeroSection>
 
       <Styles.StyledPreviewSection>