From 5d7d249fff16c6f42510d438d7a0ae97497a5bb9 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Fri, 27 Dec 2024 04:40:30 +0100
Subject: [PATCH] Fix overlay positioning

---
 src/csui/PlayerOverlay.vue        | 18 +++++++++++-------
 src/csui/csui-global.html         |  2 +-
 src/csui/csui-overlay-dark.html   |  4 ++--
 src/csui/csui-overlay-light.html  |  4 ++--
 src/csui/csui-overlay-normal.html |  4 ++--
 src/csui/csui-popup.html          |  2 +-
 6 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/src/csui/PlayerOverlay.vue b/src/csui/PlayerOverlay.vue
index af0c98c..e7b0197 100644
--- a/src/csui/PlayerOverlay.vue
+++ b/src/csui/PlayerOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="context-spawn debug-1"
+    class="context-spawn"
     style="z-index: 1000;"
     v-if="!triggerZoneEditorVisible"
   >
@@ -169,7 +169,7 @@
   <div
     v-if="triggerZoneEditorVisible"
     class="context-spawn"
-    style="z-index: 1000; border: 2px dashed red"
+    style="z-index: 1000; border: 2px dashed red; overflow: hidden;"
   >
     <TriggerZoneEditor
       class="uw-clickable"
@@ -573,7 +573,7 @@ export default {
 }
 
 .uw-window {
-  position: absolute;
+  position: fixed;
 
   top: 10%;
   left: 10%;
@@ -608,9 +608,15 @@ export default {
 
 .context-spawn {
   position: absolute;
-  top: 50%;
+  top: 0;
   left: 0;
-  transform: translateY(-50%);
+
+  width: 100dvw;
+  height: 100dvh;
+
+  box-sizing: border-box;
+  overflow: hidden;
+
   display: flex;
   flex-direction: row;
   align-content: center;
@@ -618,8 +624,6 @@ export default {
   // width: 100%;
   // height: 100%;
 
-  padding: 2rem;
-
   color: #fff;
 
   // .context-item {
diff --git a/src/csui/csui-global.html b/src/csui/csui-global.html
index fb5a9ec..27ad38c 100644
--- a/src/csui/csui-global.html
+++ b/src/csui/csui-global.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en"; style="position: relative">
 <head>
   <meta charset="UTF-8">
   <meta name="color-scheme" content="light dark">
diff --git a/src/csui/csui-overlay-dark.html b/src/csui/csui-overlay-dark.html
index e75edc8..a181ec3 100644
--- a/src/csui/csui-overlay-dark.html
+++ b/src/csui/csui-overlay-dark.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="position: relative">
 <head>
   <meta charset="UTF-8">
   <meta name="color-scheme" content="dark">
   <title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
   <!-- <link rel="stylesheet" href="csui.css"> -->
 </head>
-<body class="uw-ultrawidify-container-root" style="background-color: transparent">
+<body class="uw-ultrawidify-container-root" style="background-color: transparent;">
   <div id="app"></div>
   <script src="csui.js"></script>
 </body>
diff --git a/src/csui/csui-overlay-light.html b/src/csui/csui-overlay-light.html
index ba41197..804529e 100644
--- a/src/csui/csui-overlay-light.html
+++ b/src/csui/csui-overlay-light.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="position: relative">
 <head>
   <meta charset="UTF-8">
   <meta name="color-scheme" content="light">
   <title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
   <!-- <link rel="stylesheet" href="csui.css"> -->
 </head>
-<body class="uw-ultrawidify-container-root" style="background-color: transparent">
+<body class="uw-ultrawidify-container-root" style="background-color: transparent;">
   <div id="app"></div>
   <script src="csui.js"></script>
 </body>
diff --git a/src/csui/csui-overlay-normal.html b/src/csui/csui-overlay-normal.html
index 4b1bcd6..ed5a50e 100644
--- a/src/csui/csui-overlay-normal.html
+++ b/src/csui/csui-overlay-normal.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="position: relative">
 <head>
   <meta charset="UTF-8">
   <title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
   <!-- <link rel="stylesheet" href="csui.css"> -->
 </head>
-<body class="uw-ultrawidify-container-root" style="background-color: transparent">
+<body class="uw-ultrawidify-container-root" style="background-color: transparent;">
   <div id="app"></div>
   <script src="csui.js"></script>
 </body>
diff --git a/src/csui/csui-popup.html b/src/csui/csui-popup.html
index 508b666..af3b91c 100644
--- a/src/csui/csui-popup.html
+++ b/src/csui/csui-popup.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="position: relative">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
