🐛 fix: mobile layout overlapping screen

Author: Moeefa

src/app/layout.tsx

@@ -54,7 +54,7 @@ export default function RootLayout({
         <Providers>
           <div className="flex flex-col min-h-screen">
             <Header />
-            <main className="flex flex-col items-center justify-center flex-1 relative px-8 mt-20 mb-4 space-y-4">
+            <main className="flex flex-col justify-center flex-1 relative px-8 mt-20 mb-4 space-y-4">
               {children}
             </main>
             <Footer />

src/app/page.tsx

@@ -35,7 +35,7 @@ export default async function Home() {
         <h4 className="text-sm font-medium leading-none px-3 py-3 h-9 mb-2 flex gap-2">
           Matérias <PencilRuler className="w-4 h-4" />{" "}
           {typeof period !== "string" && (
-            <Badge>
+            <Badge className="h-4">
               {period?.ano_letivo}/{period?.periodo_letivo}
             </Badge>
           )}