From b9d55f23cf2225c6c006ad17da0774bea315b1f4 Mon Sep 17 00:00:00 2001
From: Captain Jack Sparrow <163903675+sussy-code@users.noreply.github.com>
Date: Sun, 9 Jun 2024 21:36:24 +0000
Subject: [PATCH] Update turnstile widget to always fit inside its retaining
 box

---
 src/components/overlays/OverlayDisplay.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/overlays/OverlayDisplay.tsx b/src/components/overlays/OverlayDisplay.tsx
index f428074f8..824a69c2a 100644
--- a/src/components/overlays/OverlayDisplay.tsx
+++ b/src/components/overlays/OverlayDisplay.tsx
@@ -29,13 +29,13 @@ function TurnstileInteractive() {
   return (
     <div
       className={classNames(
-        "absolute w-10/12 max-w-[43em] p-10 rounded-lg bg-dropdown-altBackground select-none z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform",
+        "absolute w-full max-w-[43em] max-h-full p-5 md:p-10 rounded-lg bg-dropdown-altBackground select-none z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform overflow-auto",
         show ? "" : "hidden",
       )}
     >
-      <div className="w-full grid lg:grid-cols-[1fr,auto] gap-7 items-center">
+      <div className="w-full h-full grid lg:grid-cols-[1fr,auto] gap-4 md:gap-7 items-center">
         <div className="text-left">
-          <h2 className="text-type-emphasis font-bold text-xl mb-6">
+          <h2 className="text-type-emphasis font-bold text-lg md:text-xl mb-4 md:mb-6">
             {t("player.turnstile.title")}
           </h2>
           <p className="text-type-emphasis">