style: centered contents for all pages

src/app/lesson/page.tsx

@@ -1,6 +1,6 @@
 export default async function Lesson() {
   return (
-    <main className="">
+    <main className="mx-auto max-w-2xl">
       <h1 className="text-2xl font-bold">Lesson</h1>
     </main>
   );

src/app/page.tsx

@@ -1,6 +1,6 @@
 export default async function Landing() {
   return (
-    <main className="">
+    <main className="mx-auto max-w-2xl">
       <h1 className="text-2xl font-bold">Landing</h1>
     </main>
   );

src/app/practice/page.tsx

@@ -1,6 +1,6 @@
 export default async function Practice() {
   return (
-    <main className="">
+    <main className="mx-auto max-w-2xl">
       <h1 className="text-2xl font-bold">Practice</h1>
     </main>
   );

src/app/profile/[username]/page.tsx

@@ -4,7 +4,7 @@ export default async function Profile() {
   const user = await currentUser();
 
   return (
-    <main className="">
+    <main className="mx-auto max-w-2xl">
       <h1 className="text-2xl font-bold">Profile</h1>
       <pre>{JSON.stringify(user, undefined, 2)}</pre>
     </main>

src/app/profile/page.tsx

@@ -4,7 +4,7 @@ export default async function Profile() {
   const user = await currentUser();
 
   return (
-    <main className="">
+    <main className="mx-auto max-w-2xl">
       <h1 className="text-2xl font-bold">Profile</h1>
       <pre>{JSON.stringify(user, undefined, 2)}</pre>
     </main>

src/app/settings/page.tsx

@@ -1,6 +1,6 @@
 export default async function Settings() {
   return (
-    <main className="">
+    <main className="mx-auto max-w-2xl">
       <h1 className="text-2xl font-bold">Settings</h1>
     </main>
   );