From a61ccea3175bc256187dc064a06ab358f47c3fb2 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Mon, 11 Apr 2022 01:27:04 +0200
Subject: [PATCH] Popup had a problem when they need to be scroolable

---
 src/components/Popup.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index b564a65..8e2267c 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -14,15 +14,12 @@ interface Props {
 export default function Popup(props: Props): JSX.Element {
   return (
     <div
-      className={`fixed inset-0 z-50 grid place-content-center transition-[backdrop-filter] duration-500 ${
+      className={`fixed inset-0 z-50 grid place-content-center
+      transition-[backdrop-filter] duration-500 ${
         props.state
           ? "[backdrop-filter:blur(2px)]"
           : "pointer-events-none touch-none"
       }`}
-      onKeyUp={(event) => {
-        if (event.key.match("Escape")) props.setState(false);
-      }}
-      tabIndex={0}
     >
       <div
         className={`fixed bg-shade inset-0 transition-all duration-500 ${
@@ -32,21 +29,20 @@ export default function Popup(props: Props): JSX.Element {
           props.setState(false);
         }}
       />
+
       <div
         className={`p-10 grid gap-4 place-items-center transition-transform ${
           props.state ? "scale-100" : "scale-0"
-        } ${props.fillViewport ? "absolute inset-10 top-20" : "relative"} ${
+        } ${
+          props.fillViewport
+            ? "absolute inset-10 top-20"
+            : "relative max-h-[80vh] overflow-y-auto mobile:w-[85vw]"
+        } ${
           props.hideBackground
             ? ""
             : "bg-light rounded-lg shadow-2xl shadow-shade"
         }`}
       >
-        <Button
-          className="!p-1 absolute -top-16 bg-light border-light border-4"
-          onClick={() => props.setState(false)}
-        >
-          <span className="material-icons p-1">close</span>
-        </Button>
         {props.children}
       </div>
     </div>