From 0eeabddb4553c305e249c286a84bb558013dfbc2 Mon Sep 17 00:00:00 2001
From: Malted <malted@malted.dev>
Date: Wed, 4 Sep 2024 11:41:26 -0400
Subject: [PATCH] Optimise /replit for mobile

---
 components/replit/form.js               |  1 +
 components/replit/token-instructions.js | 17 +++++++++++++++++
 pages/replit.js                         |  5 +++--
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/components/replit/form.js b/components/replit/form.js
index ab231bd1..dd2c61de 100644
--- a/components/replit/form.js
+++ b/components/replit/form.js
@@ -272,6 +272,7 @@ const ReplitForm = ({ cssDark }) => {
             className="sticker"
             sx={{
               position: 'absolute',
+              display: ['none', null, 'block'],
               rotate: stickerPositions[idx]?.rotation,
               left: `${stickerPositions[idx]?.position[0] * 100}%`,
               top: `${stickerPositions[idx]?.position[1] * 100}%`,
diff --git a/components/replit/token-instructions.js b/components/replit/token-instructions.js
index 18c6f924..337ade35 100644
--- a/components/replit/token-instructions.js
+++ b/components/replit/token-instructions.js
@@ -93,6 +93,23 @@ const TokenInstructions = () => {
           sx={{ width: '100%', height: 'auto', borderRadius: '0.25rem' }}
         />
       </Box>
+
+      <Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
+        <Button
+          onClick={() =>
+            setCurrentStep(prev => Math.min(prev + 1, tokenSteps.length - 1))
+          }
+          sx={{
+            bg: 'hsl(23, 94%, 32%)',
+            display: currentStep === tokenSteps.length - 1 ? 'none' : 'block',
+            pointerEvents:
+              currentStep === tokenSteps.length - 1 ? 'none' : 'auto',
+            fontSize: '0.8em'
+          }}
+        >
+          Next step
+        </Button>
+      </Box>
     </Card>
   )
 }
diff --git a/pages/replit.js b/pages/replit.js
index 76d800a9..f618fa2c 100644
--- a/pages/replit.js
+++ b/pages/replit.js
@@ -59,7 +59,8 @@ const ReplitPage = () => {
           paddingBottom: '1rem',
           textAlign: 'center',
           backgroundColor: cssDark,
-          color: 'white'
+          color: 'white',
+          overflow: 'hidden'
         }}
       >
         <Heading as="h1" sx={{ position: 'relative', marginBottom: '1rem' }}>
@@ -275,7 +276,7 @@ const ReplitPage = () => {
         <Box
           sx={{
             marginTop: '3rem',
-            width: '30rem',
+            maxWidth: '30rem',
             marginX: 'auto'
           }}
         >