make things look nicer and work on image change

src/pages/profile_page.html

@@ -270,6 +270,22 @@
         image_dark_overlay.style.setProperty("--x-offset", "0px");
         image_dark_overlay.style.setProperty("--y-offset", "0px");
 
+        bounds = calculateBoxBoundsOnImage({
+            x: 0,
+            y: 0,
+        });
+        image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
+        image_dark_overlay.style.setProperty(
+            "--right-edge",
+            bounds.right + "px",
+        );
+
+        image_dark_overlay.style.setProperty("--top-edge", bounds.top + "px");
+        image_dark_overlay.style.setProperty(
+            "--bottom-edge",
+            bounds.bottom + "px",
+        );
+
         resize_photo_box.style.setProperty("--size", "350px");
     });
 

static/javascript/resize_photo_dialouge.js

@@ -23,21 +23,18 @@ function calculateOffsets() {
   return { x: xOffset + left + right, y: yOffset + top + bottom };
 }
 
-function calculateBoxBoundsOnImage() {
+function calculateBoxBoundsOnImage(offsets) {
-  offsets = calculateOffsets();
-
   const x_overspill = image_width - 360;
   const left_overspill = x_overspill / 2 - offsets.x;
-  // const right_overspill = x_overspill / 2 - offsets.y;
 
   const y_overspill = image_height - 360;
   const top_overspill = y_overspill / 2 - offsets.y;
 
   return {
-    left: left_overspill + 5,
+    left: left_overspill,
-    right: left_overspill + 5 + 350,
+    right: left_overspill + 360,
-    top: top_overspill + 5,
+    top: top_overspill,
-    bottom: top_overspill + 350 + 5,
+    bottom: top_overspill + 360,
   };
 }
 
@@ -53,7 +50,7 @@ resize_photo_box.addEventListener("mousemove", () => {
   image_dark_overlay.style.setProperty("--x-offset", offsets.x + "px");
   image_dark_overlay.style.setProperty("--y-offset", offsets.y + "px");
 
-  bounds = calculateBoxBoundsOnImage();
+  bounds = calculateBoxBoundsOnImage(offsets);
   image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
   image_dark_overlay.style.setProperty("--right-edge", bounds.right + "px");
 

static/profile_page.css

@@ -255,14 +255,17 @@
 }
 
 #circle-display {
-    width: 100%;
+    position: absolute;
-    height: 100%;
+    width: calc(100% + 10px);
+    height: calc(100% + 10px);
+    transform: translateX(-5px) translateY(-5px);
+    transform: scale(10px);
     background: radial-gradient(
         circle closest-side,
         transparent 99%,
         rgba(0, 0, 0, 0.5) 100%
     );
-    display: none;
+    /*dispalt*/
 }
 
 #image_dark_overlay {