update popups to be more centered

app.py

@@ -52,11 +52,11 @@ def generate_cited_html(cited_text, citations: dict):
     cited_text = cited_text.replace("\n", "<br>")
     html_code = """
     <style>
-      .reference-container {
+    .reference-container {
         position: relative;
         display: inline-block;
-      }
-      .reference-btn {
+    }
+    .reference-btn {
         display: inline-block;
         width: 25px;
         height: 25px;
@@ -69,12 +69,12 @@ def generate_cited_html(cited_text, citations: dict):
         font-weight: bold;
         margin-right: 5px;
         transition: background-color 0.3s ease, transform 0.3s ease;
-      }
-      .reference-btn:hover {
+    }
+    .reference-btn:hover {
         background-color: #1e90ff; /* Lighter blue on hover */
         transform: scale(1.1); /* Slightly enlarge on hover */
-      }
-      .reference-popup {
+    }
+    .reference-popup {
         display: none;
         position: absolute;
         z-index: 1;
@@ -85,21 +85,26 @@ def generate_cited_html(cited_text, citations: dict):
         padding: 10px;
         border-radius: 4px;
         box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-        width: calc(min(90vw, 500px));
+        width: calc(min(90vw, 400px));
         max-height: calc(min(80vh, 300px));
         overflow-y: auto;
         transform: translateX(0); /* Default position */
-      }
-      .reference-container .reference-popup {
+    }
+    .reference-container .reference-popup {
         left: 50%;
         transform: translateX(-50%); /* Center align popup horizontally by default */
         }
-      .reference-container[data-align="right"] .reference-popup {
+    .reference-container[data-align="right"] .reference-popup {
         left: auto;
         right: 0;
         transform: translateX(-10%); /* Pull the popup slightly left when near right edge */
         }
-      .reference-popup .close-btn {
+    .reference-container[data-align="left"] .reference-popup {
+        left: 0;
+        right: auto;
+        transform: translateX(20%); 
+        }  
+    .reference-popup .close-btn {
         float: right;
         cursor: pointer;
         font-weight: bold;
@@ -113,61 +118,52 @@ def generate_cited_html(cited_text, citations: dict):
         background-color: #ff4c4c;
         border-radius: 2px;
         transition: transform 0.3s ease, background-color 0.3s ease;
-      }
-      .reference-popup .close-btn:hover {
+    }
+    .reference-popup .close-btn:hover {
         transform: scale(1.2);
         background-color: #ff3333;
-      }
-      input[type="radio"] {
+    }
+    input[type="radio"] {
         position: absolute;
         opacity: 0;
         pointer-events: none;
-      }
-      input[type="radio"]:checked + .reference-popup {
+    }
+    input[type="radio"]:checked + .reference-popup {
         display: block;
-      }
-      @media (prefers-color-scheme: dark) {
+    }
+    @media (prefers-color-scheme: dark) {
         .reference-btn {
-          background-color: #1e90ff;
+        background-color: #1e90ff;
         }
         .reference-popup {
-          background-color: #2c2c2c;
-          border-color: #444;
-          color: #f1f1f1;
+        background-color: #2c2c2c;
+        border-color: #444;
+        color: #f1f1f1;
         }
         .reference-popup .close-btn {
-          background-color: #ff4c4c;
+        background-color: #ff4c4c;
         }
         .reference-popup .close-btn:hover {
-          background-color: #ff3333;
+        background-color: #ff3333;
         }
-      }
+    }
     </style>
     <script>
     document.addEventListener('click', (event) => {
         const containers = document.querySelectorAll('.reference-container');
         containers.forEach(container => {
-          const rect = container.getBoundingClientRect();
-          if (rect.right > window.innerWidth - 50) {
+        const rect = container.getBoundingClientRect();
+        if (rect.right > window.innerWidth - 50) {
             container.setAttribute('data-align', 'right');
-          } else if (rect.left < 50) {
+        } else if (rect.left < 50) {
             container.setAttribute('data-align', 'left');
-          } else {
+        } else {
             container.removeAttribute('data-align');
-          }
-        });
-      });
-
-    function closeReferencePanes(event) {
-        if (!event.target.closest('.reference-container')) {
-          const checkboxes = document.querySelectorAll('input[type="radio"]');
-          checkboxes.forEach(checkbox => checkbox.checked = false);
         }
-      }
-
-      document.addEventListener('click', closeReferencePanes);
+        });
+    });
     </script>
-    <div style="height: 600px; overflow-y: auto;">
+    <div style="height: 600px; overflow-y: auto; overflow-x: auto;">
     """
 
     # Function to replace each citation with a reference button