From 531c18626ad94546795abefc8d0495063ebfb3b2 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Fri, 26 Apr 2024 20:53:25 -0400
Subject: [PATCH] Frontend: Improve mobile support

---
 Frontend/src/app/(pages)/mojang/page.tsx             | 2 +-
 Frontend/src/app/(pages)/player/[[...slug]]/page.tsx | 2 +-
 Frontend/src/app/(pages)/server/[[...slug]]/page.tsx | 2 +-
 Frontend/src/app/components/footer.tsx               | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/app/(pages)/mojang/page.tsx b/Frontend/src/app/(pages)/mojang/page.tsx
index ad18cb7..8fafbd5 100644
--- a/Frontend/src/app/(pages)/mojang/page.tsx
+++ b/Frontend/src/app/(pages)/mojang/page.tsx
@@ -59,7 +59,7 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
     const { servers }: MojangServerStatusResponse =
         await getMojangServerStatus(); // Get Mojang server statuses
     return (
-        <main className="h-screen flex flex-col gap-7 justify-center items-center">
+        <main className="mb-32 xl:mb-24 2xl:mb-12 h-screen flex flex-col gap-7 justify-center items-center transition-all transform-gpu">
             {/* Header */}
             <h1
                 className={cn(
diff --git a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx
index 822a291..6d533ec 100644
--- a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx
@@ -52,7 +52,7 @@ const PlayerPage = async ({ params }: PageProps): Promise<ReactElement> => {
 
     // Render the page
     return (
-        <main className="px-3 h-screen flex justify-center items-center">
+        <main className="mb-32 xl:mb-24 2xl:mb-12 px-3 h-screen flex justify-center items-center transition-all transform-gpu">
             <div className="flex flex-col gap-7">
                 <h1
                     className={cn(
diff --git a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
index 1b4bc2a..be2b626 100644
--- a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
@@ -67,7 +67,7 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
 
     // Render the page
     return (
-        <main className="px-3 h-screen flex flex-col gap-7 justify-center items-center">
+        <main className="mb-52 sm:mb-36 2xl:mb-12 px-3 h-screen flex flex-col gap-7 justify-center items-center transition-all transform-gpu">
             <div className="flex flex-col gap-7">
                 {/* Header */}
                 <div className="flex flex-col gap-7">
diff --git a/Frontend/src/app/components/footer.tsx b/Frontend/src/app/components/footer.tsx
index ecae605..fdd0ebb 100644
--- a/Frontend/src/app/components/footer.tsx
+++ b/Frontend/src/app/components/footer.tsx
@@ -40,8 +40,8 @@ const Footer = (): ReactElement => (
     <footer
         className={cn(
             `before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-[url("/media/dark-wool-background.png")] before:bg-center before:bg-repeat`, // Background
-            "relative inset-x-0 bottom-0 h-72 flex justify-center items-center", // Styling
-            `after:absolute after:top-0 after:left-0 after:-translate-y-20 after:w-full after:h-20 after:bg-[url("/media/dark-wool-transition.png")] after:bg-center after:bg-repeat` // Top Border
+            "relative inset-x-0 bottom-0 h-72 flex justify-center items-center -z-10", // Styling
+            `after:absolute after:top-0 after:left-0 after:-translate-y-20 after:w-full after:h-20 after:bg-[url("/media/dark-wool-transition.png")] after:bg-center after:bg-repeat after:-z-10` // Top Border
         )}
     >
         <div className="xl:px-40 pb-14 md:pb-0 flex flex-col gap-7 md:flex-row md:gap-0 justify-around items-center z-50 w-full h-full transition-all transform-gpu">