Position publication viewer always withing display

changed publicationviewer width

Website/interaction.js

@@ -134,9 +134,21 @@ function ResetContent(){
     tasksContent.appendChild(add);
 }
 function ShowPublicationViewerWindow(publicationId, event, add){
+
+
+    //Show popup
+    publicationViewerPopup.style.display = "block";
+    
     //Set position to mouse-position
-    publicationViewerWindow.style.top = `${event.clientY - 60}px`;
+    if(event.clientY < window.innerHeight - publicationViewerWindow.offsetHeight)
-    publicationViewerWindow.style.left = `${event.clientX}px`;
+        publicationViewerWindow.style.top = `${event.clientY}px`;
+    else
+        publicationViewerWindow.style.top = `${event.clientY - publicationViewerWindow.offsetHeight}px`;
+    
+    if(event.clientX < window.innerWidth - publicationViewerWindow.offsetWidth)
+        publicationViewerWindow.style.left = `${event.clientX}px`;
+    else
+        publicationViewerWindow.style.left = `${event.clientX - publicationViewerWindow.offsetWidth}px`;
     
     //Edit information inside the window
     var publication = publications.filter(pub => pub.internalId === publicationId)[0];
@@ -155,9 +167,6 @@ function ShowPublicationViewerWindow(publicationId, event, add){
         publicationAdd.style.display = "none";
         publicationDelete.style.display = "block";
     }
-    
-    //Show popup
-    publicationViewerPopup.style.display = "block";
 }
 
 function HidePublicationPopup(){

Website/style.css

@@ -242,7 +242,7 @@ popup{
     min-height: 100%;
     top: 0;
     left: 0;
-    position: absolute;
+    position: fixed;
     z-index: 2;
 }
 
@@ -342,7 +342,7 @@ addtask-settings addtask-setting{
 
 publication-viewer{
     display: block;
-    width: 500px;
+    width: 450px;
     height: 300px;
     position: absolute;
     top: 200px;