From b9df166263341ec633f358773ea01e0c24b7a44d Mon Sep 17 00:00:00 2001
From: Nils Knappmeier <npm@knappi.org>
Date: Sat, 24 Aug 2024 14:49:47 +0200
Subject: [PATCH] consent dialog styling

---
 src/YoutubePlayer/ConsentDialog.tsx | 30 +++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/YoutubePlayer/ConsentDialog.tsx b/src/YoutubePlayer/ConsentDialog.tsx
index 6a48894..6d7992c 100644
--- a/src/YoutubePlayer/ConsentDialog.tsx
+++ b/src/YoutubePlayer/ConsentDialog.tsx
@@ -36,28 +36,30 @@ export const ConsentDialog: Component<{ setResult: (value: boolean) => void }> =
     <div ref={setElement} class={"fixed inset-0 bg-black/25 z-50 opacity-0"}>
       <div
         class={
-          "absolute bg-white p-8 rounded-lg top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 max-w-2xl w-3/4 shadow-xl"
+          "absolute bg-white p-8 rounded-lg top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 max-h-full sm:max-h-[75vh] max-w-2xl h-full sm:h-auto h-full w-full sm:w-3/4 shadow-xl flex flex-col"
         }
       >
         <h1 class={"text-secondary-dark flex flex-wrap mt-0"}>
           <IconYoutubeWhite class={"h-8 pe-2"} />
           {t("video.consent.title")}
         </h1>
-        <p class={"text-secondary-dark"}>{t("video.consent.text")}</p>
-        <p class="mb-8">
-          <a
-            target="_blank"
-            href="https://www.youtube.com/howyoutubeworks/our-commitments/protecting-user-data/#privacy-guidelines"
-          >
-            {t("video.consent.link-text")}
-          </a>
-        </p>
+        <div class={"overflow-y-auto flex-1"}>
+          <p class={"text-secondary-dark "}>{t("video.consent.text")}</p>
+          <p class="mb-8">
+            <a
+              target="_blank"
+              href="https://www.youtube.com/howyoutubeworks/our-commitments/protecting-user-data/#privacy-guidelines"
+            >
+              {t("video.consent.link-text")}
+            </a>
+          </p>
 
-        <div class={"grid grid-cols-1 xl:grid-cols-2 gap-4"}>
-          <SimpleButton label={t("video.consent.yes")} onClick={() => onResult(true)} />
-          <SimpleButton label={t("video.consent.no")} onClick={() => onResult(false)} />
+          <div class={"grid grid-cols-1 xl:grid-cols-2 gap-4"}>
+            <SimpleButton label={t("video.consent.yes")} onClick={() => onResult(true)} />
+            <SimpleButton label={t("video.consent.no")} onClick={() => onResult(false)} />
+          </div>
+          <div class={"mt-4 text-secondary"}>{t("video.consent.suffix")}</div>
         </div>
-        <div class={"mt-4 text-secondary"}>{t("video.consent.suffix")}</div>
       </div>
     </div>
   );