From 4b778e444df559d27eaeac2757cba445843b0fc3 Mon Sep 17 00:00:00 2001
From: Puria Nafisi Azizi <puria@dyne.org>
Date: Sun, 27 Feb 2022 16:29:23 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=92=84=20Enhance=20visualisation?=
 =?UTF-8?q?=20of=20the=20Tutorial=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 repl/src/tutorial/Tutorial.js  | 8 +++-----
 repl/src/tutorial/style.css    | 4 ++--
 repl/src/tutorial/tutorial.mdx | 2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/repl/src/tutorial/Tutorial.js b/repl/src/tutorial/Tutorial.js
index f16e6f1c..a721a0a1 100644
--- a/repl/src/tutorial/Tutorial.js
+++ b/repl/src/tutorial/Tutorial.js
@@ -19,11 +19,9 @@ ReactDOM.render(
           )}
         </div>
       </header>
-      <div className="flex justify-center">
-        <main className="p-4 max-w-3xl prose">
-          <Tutorial />
-        </main>
-      </div>
+      <main className="p-4 max-w-3xl prose">
+        <Tutorial />
+      </main>
     </div>
   </React.StrictMode>,
   document.getElementById('root')
diff --git a/repl/src/tutorial/style.css b/repl/src/tutorial/style.css
index 1abd05e8..2a2e1d06 100644
--- a/repl/src/tutorial/style.css
+++ b/repl/src/tutorial/style.css
@@ -8,6 +8,6 @@
   height: inherit !important;
 }
 
-.justify-center {
-  justify-content: center;
+main {
+  margin: 0 auto;
 }
diff --git a/repl/src/tutorial/tutorial.mdx b/repl/src/tutorial/tutorial.mdx
index 43b06859..f6175a3d 100644
--- a/repl/src/tutorial/tutorial.mdx
+++ b/repl/src/tutorial/tutorial.mdx
@@ -315,7 +315,7 @@ Like "\*" in mini notation, **fast** will play a pattern times the given number
 
 With early, you can nudge a pattern to start earlier in time:
 
-<MiniRepl tune={`cat(e5, b4.late(0.5))`} />
+<MiniRepl tune={`cat(e5, b4.early(0.5))`} />
 
 ### late(cycles)