From ca7345543f19adc453e2dfb9f21818105a0629f2 Mon Sep 17 00:00:00 2001
From: Starknet Dev <starknetdev@gmail.com>
Date: Fri, 13 Sep 2024 14:58:17 -0400
Subject: [PATCH] fix prescience overlaps

---
 .../components/encounters/EnounterDialog.tsx  | 28 ++++++++++---------
 ui/src/app/page.tsx                           |  6 +---
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/ui/src/app/components/encounters/EnounterDialog.tsx b/ui/src/app/components/encounters/EnounterDialog.tsx
index 079b19af7..471216070 100644
--- a/ui/src/app/components/encounters/EnounterDialog.tsx
+++ b/ui/src/app/components/encounters/EnounterDialog.tsx
@@ -12,28 +12,30 @@ const EncounterDialog = () => {
   const position = useMemo(() => {
     if (width > 1024) {
       // Large screens
-      return { x: width - 650, y: 50 };
+      return { x: width - 850, y: -500 };
     } else if (width > 768) {
       // Medium screens
-      return { x: width - 620, y: 50 };
+      return { x: width - 620, y: -500 };
     } else {
       // Small screens
-      return { x: 300, y: 50 };
+      return { x: 0, y: -500 };
     }
   }, [width]);
 
   return (
-    <Draggable defaultPosition={position}>
-      <div className="relative">
-        <MdClose
-          className="w-10 h-10 absolute top-0 left-[-40px] z-10 border-y border-l border-bottom border-terminal-green bg-terminal-black cursor-pointer"
-          onClick={() => showEncounterTable(false)}
-        />
-        <div className="flex flex-col gap-5 sm:gap-0 sm:flex-row justify-between w-[600px] bg-terminal-black max-h-[300px] border border-terminal-green text-xs sm:text-base overflow-y-scroll default-scroll cursor-pointer hover:shadow-lg">
-          <EncounterTable />
+    <div className="absolute">
+      <Draggable defaultPosition={position}>
+        <div className="relative">
+          <MdClose
+            className="w-10 h-10 absolute top-0 left-[-40px] z-10 border-y border-l border-bottom border-terminal-green bg-terminal-black cursor-pointer"
+            onClick={() => showEncounterTable(false)}
+          />
+          <div className="flex flex-col gap-5 sm:gap-0 sm:flex-row justify-between w-[600px] bg-terminal-black max-h-[300px] border border-terminal-green text-xs sm:text-base overflow-y-scroll default-scroll cursor-pointer hover:shadow-lg">
+            <EncounterTable />
+          </div>
         </div>
-      </div>
-    </Draggable>
+      </Draggable>
+    </div>
   );
 };
 
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
index bbec5a663..bd5e86b02 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -866,11 +866,7 @@ function Home() {
                 {screen === "player" && <Player gameContract={gameContract!} />}
                 {screen === "wallet" && <WalletSelect />}
 
-                {encounterTable && (
-                  <div className="absolute top-1/2 right-1/2 transform -translate-x-1/2 -translate-y-1/2  z-10">
-                    <EncounterDialog />
-                  </div>
-                )}
+                {encounterTable && <EncounterDialog />}
 
                 {showProfile && (
                   <div className="absolute flex items-center justify-center top-0 right-0 left-0 w-full h-full bg-black/50">