Optimise /replit for mobile

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}%`,

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>
   )
 }

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'
           }}
         >