From d1217c7ed738244859ac7d491260f6d43a4110e1 Mon Sep 17 00:00:00 2001
From: JorySeverijnse <jory@severijnse.eu>
Date: Sat, 3 Jan 2026 00:17:38 +0100
Subject: [PATCH] Fixed the layout of the mobile screen on all /games

---
 src/components/MainLayout.tsx | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx
index 1033748..113a5e6 100644
--- a/src/components/MainLayout.tsx
+++ b/src/components/MainLayout.tsx
@@ -5,38 +5,45 @@ import { MiniOscilloscope } from './MiniOscilloscope';
 
 const MainLayout = () => {
   const location = useLocation();
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
   // Don't show mini oscilloscope on the oscilloscope page itself
   const showMiniOscilloscope = location.pathname !== '/oscilloscope';
+  // Check if on game page and mobile
+  const isMobileGamePage = isMobile && location.pathname.startsWith('/games/') && location.pathname !== '/games' && location.pathname !== '/games/leaderboard';
 
   return (
     <motion.div 
       initial={{ opacity: 0, scale: 0.95 }} 
       animate={{ opacity: 1, scale: 1 }} 
       transition={{ duration: 0.5 }} 
-      className="relative z-10 flex flex-col items-center pt-8 md:pt-12 px-4 w-full pb-20"
+      className={`relative z-10 flex flex-col items-center ${isMobileGamePage ? 'pt-4' : 'pt-8 md:pt-12'} px-4 w-full ${isMobileGamePage ? 'pb-4' : 'pb-20'}`}
     >
-      {/* Branding */}
-      <motion.h1 
-        initial={{ opacity: 0, y: -20 }} 
-        animate={{ opacity: 1, y: 0 }} 
-        transition={{ delay: 0.3, duration: 0.5 }} 
-        className="font-minecraft text-4xl md:text-5xl lg:text-6xl text-primary text-glow-strong mb-6"
-      >
-        <span className="inline-block translate-y-[0.35em]">~</span>$ whoami Jory
-      </motion.h1>
+      {!isMobileGamePage && (
+        <>
+          {/* Branding */}
+          <motion.h1 
+            initial={{ opacity: 0, y: -20 }} 
+            animate={{ opacity: 1, y: 0 }} 
+            transition={{ delay: 0.3, duration: 0.5 }} 
+            className="font-minecraft text-4xl md:text-5xl lg:text-6xl text-primary text-glow-strong mb-6"
+          >
+            <span className="inline-block translate-y-[0.35em]">~</span>$ whoami Jory
+          </motion.h1>
+        </>
+      )}
 
       {/* Main Container */}
-      <div className="w-full max-w-[90vw] xl:max-w-[1200px] 2xl:max-w-[1400px] min-h-[55vh] md:h-[70vh] max-h-[750px] flex flex-col md:flex-row border-2 border-primary bg-background/60 box-glow-strong rounded-lg overflow-hidden">
-        <Sidebar />
+      <div className={`w-full ${isMobileGamePage ? 'h-[calc(100vh-2rem)] max-w-[95vw]' : 'max-w-[90vw] xl:max-w-[1200px] 2xl:max-w-[1400px] min-h-[55vh] md:h-[70vh] max-h-[750px]'} flex flex-col md:flex-row border-2 border-primary bg-background/60 box-glow-strong rounded-lg overflow-hidden`}>
+        {!isMobileGamePage && <Sidebar />}
         
         {/* Content Area */}
-        <main className="flex-1 p-6 md:p-8 overflow-y-auto bg-background/40">
+        <main className={`flex-1 p-6 md:p-8 ${isMobileGamePage ? 'p-2 md:p-4 overflow-hidden' : 'overflow-y-auto'} bg-background/40`}>
           <Outlet />
         </main>
       </div>
 
       {/* Mini Oscilloscope Bar */}
-      {showMiniOscilloscope && <MiniOscilloscope />}
+      {showMiniOscilloscope && !isMobileGamePage && <MiniOscilloscope />}
     </motion.div>
   );
 };