From 2ba179a62bd141940092be0ee219f1f233418da8 Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Tue, 30 Jun 2026 14:24:03 -0400
Subject: [PATCH] make things look nicer and work on image change

---
 src/pages/profile_page.html                | 16 ++++++++++++++++
 static/javascript/resize_photo_dialouge.js | 15 ++++++---------
 static/profile_page.css                    |  9 ++++++---
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/pages/profile_page.html b/src/pages/profile_page.html
index 0c134f1..5986d1a 100644
--- a/src/pages/profile_page.html
+++ b/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");
     });
 
diff --git a/static/javascript/resize_photo_dialouge.js b/static/javascript/resize_photo_dialouge.js
index 204c20b..c7c2bf0 100644
--- a/static/javascript/resize_photo_dialouge.js
+++ b/static/javascript/resize_photo_dialouge.js
@@ -23,21 +23,18 @@ function calculateOffsets() {
   return { x: xOffset + left + right, y: yOffset + top + bottom };
 }
 
-function calculateBoxBoundsOnImage() {
-  offsets = calculateOffsets();
-
+function calculateBoxBoundsOnImage(offsets) {
   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,
-    right: left_overspill + 5 + 350,
-    top: top_overspill + 5,
-    bottom: top_overspill + 350 + 5,
+    left: left_overspill,
+    right: left_overspill + 360,
+    top: top_overspill,
+    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");
 
diff --git a/static/profile_page.css b/static/profile_page.css
index 2c29df2..99a69d5 100644
--- a/static/profile_page.css
+++ b/static/profile_page.css
@@ -255,14 +255,17 @@
 }
 
 #circle-display {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    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 {