fix(styles): alignments

Author: Ciensprog

src/layouts/main.tsx

@@ -10,7 +10,6 @@ import { ScrollArea } from '../components/ui/scroll-area'
 import logoLaucher from '../_assets/aerial-launcher.png'
 
 import { whatIsThis } from '../lib/callbacks'
-import { cn } from '../lib/utils'
 
 export function MainLayout({ children }: PropsWithChildren) {
   return (
@@ -36,15 +35,14 @@ export function MainLayout({ children }: PropsWithChildren) {
       </div>
       <div className="flex flex-col">
         <Header />
-        <main className="">
-          <ScrollArea
-            viewportClassName={cn(
-              'main-wrapper-content [&>div]:!flex [&>div]:flex-col [&>div]:gap-4 [&>div]:h-[calc(100vh-var(--header-height))] [&>div]:p-4 [&>div]:relative [&>div]:lg:gap-6 [&>div]:lg:p-6'
-            )}
-          >
+        <ScrollArea
+          className="h-[calc(100vh-var(--header-height))]"
+          viewportClassName="main-wrapper-content"
+        >
+          <main className="flex flex-col gap-4 h-full min-h-[calc(100vh-var(--header-height))] p-4 relative lg:gap-6 lg:p-6">
             {children}
-          </ScrollArea>
-        </main>
+          </main>
+        </ScrollArea>
       </div>
     </div>
   )

src/routes/advanced-mode/matchmaking-track/route.tsx

@@ -117,7 +117,7 @@ function Content() {
 
   return (
     <div className="flex flex-grow">
-      <div className="flex items-center justify-center mb-10 w-full">
+      <div className="flex items-center justify-center w-full">
         <div className="flex flex-col gap-5 max-w-lg w-full">
           <Card>
             <CardHeader className="border-b">