consent dialog styling

nknapp · Aug 24, 2024 · b9df166 · b9df166
1 parent 9af0763
commit b9df166
Showing 1 changed file with 16 additions and 14 deletions.
diff --git 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>
   );