From 68d4baee614314571a21784e51afa8e0f137ee34 Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Sun, 14 Jun 2026 17:39:38 -0400
Subject: [PATCH] add offsets into handles

---
 static/javascript/resize_photo_dialouge.js |  6 ++++++
 static/profile_page.css                    | 12 ++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/static/javascript/resize_photo_dialouge.js b/static/javascript/resize_photo_dialouge.js
index 8dede25..dabb87c 100644
--- a/static/javascript/resize_photo_dialouge.js
+++ b/static/javascript/resize_photo_dialouge.js
@@ -68,10 +68,16 @@ for (var i = 0; i < resize_anchors.length; i++) {
   document.body.addEventListener("mouseup", () => {
     handleBeingHeld[index] = false;
   });
+
+  resize_anchors[i].style.setProperty("--x-offset", "0px");
+  resize_anchors[i].style.setProperty("--y-offset", "0px");
 }
 
 document.body.addEventListener("mousemove", () => {
   for (var i = 0; i < handleBeingHeld.length; i++) {
     if (!handleBeingHeld[i]) continue;
+
+    resize_anchors[i].style.setProperty("--x-offset", "100px");
+    resize_anchors[i].style.setProperty("--y-offset", "100px");
   }
 });
diff --git a/static/profile_page.css b/static/profile_page.css
index ae4afd8..2aa3f9c 100644
--- a/static/profile_page.css
+++ b/static/profile_page.css
@@ -197,7 +197,8 @@
 }
 
 #top_left_resize {
-    transform: translateX(-50%) translateY(-50%);
+    transform: translateX(calc(-50% + var(--x-offset)))
+        translateY(calc(-50% + var(--y-offset)));
 }
 
 #top_left_resize:hover {
@@ -205,7 +206,8 @@
 }
 
 #top_right_resize {
-    transform: translateX(340px) translateY(-50%);
+    transform: translateX(calc(340px - var(--x-offset)))
+        translateY(calc(-50% + var(--y-offset)));
 }
 
 #top_right_resize:hover {
@@ -213,7 +215,8 @@
 }
 
 #bottom_left_resize {
-    transform: translateY(340px) translateX(-50%);
+    transform: translateX(calc(-50% + var(--x-offset)))
+        translateY(calc(340px - var(--x-offset)));
 }
 
 #bottom_left_resize:hover {
@@ -221,7 +224,8 @@
 }
 
 #bottom_right_resize {
-    transform: translateX(340px) translateY(340px);
+    transform: translateX(calc(340px - var(--x-offset)))
+        translateY(calc(340px - var(--y-offset)));
 }
 
 #bottom_right_resize:hover {