From 12316dbe6a9f95f07aee8eca2933ca7ee1953891 Mon Sep 17 00:00:00 2001
From: Corwin <corwin@kuiper.dev>
Date: Tue, 9 Apr 2024 12:15:11 +0100
Subject: [PATCH] show mobile controls on a small screen

---
 website/agb/src/app/mobileController.tsx |  4 ++++
 website/agb/src/app/page.tsx             | 14 ++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/website/agb/src/app/mobileController.tsx b/website/agb/src/app/mobileController.tsx
index 06061324..60cdadff 100644
--- a/website/agb/src/app/mobileController.tsx
+++ b/website/agb/src/app/mobileController.tsx
@@ -19,6 +19,10 @@ const MobileControls = styled.div`
   flex-direction: column;
   margin-bottom: 40px;
 
+  @media (min-width: 500px) {
+    display: none;
+  }
+
   touch-action: none;
 
   img {
diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx
index 8c5eb20d..456757e6 100644
--- a/website/agb/src/app/page.tsx
+++ b/website/agb/src/app/page.tsx
@@ -63,6 +63,12 @@ const GameSide = styled.div`
   }
 `;
 
+const ShowOnWideScreen = styled.div`
+  @media (max-width: 500px) {
+    display: none;
+  }
+`;
+
 const isTouchScreen = () => navigator.maxTouchPoints > 1;
 
 function shouldStartPlaying(isTouchScreen: boolean | undefined) {
@@ -108,9 +114,9 @@ const MgbaWithControllerSides = () => {
           </GameSide>
         </GamePanelWrapper>
       </GameDisplay>
-      {shouldUseTouchScreenInput ? (
-        <MobileController mgba={mgbaHandle} />
-      ) : (
+
+      <MobileController mgba={mgbaHandle} />
+      <ShowOnWideScreen>
         <CenteredBlock>
           <p>
             Press escape to open the menu where you can view or change controls
@@ -119,7 +125,7 @@ const MgbaWithControllerSides = () => {
             on the main menu to switch game.
           </p>
         </CenteredBlock>
-      )}
+      </ShowOnWideScreen>
     </>
   );
 };