From 91598825a1b00983ffa555dd3eb64ec98e6f1164 Mon Sep 17 00:00:00 2001
From: Kai S <albumanyt+69420@gmail.com>
Date: Sat, 14 Mar 2026 11:06:18 +0800
Subject: [PATCH] Fix drag preview, image styles, and tooltip

Clean up item backgroundImage handling across components to avoid malformed CSS and ensure a proper 'none' fallback (InventoryHotbar, InventorySlot, ItemNotifications). Change InventorySlot drag payload image to use a ternary. Simplify DragPreview pointer calc: guard childRef, use element clientWidth/clientHeight for centering, and use translate3d for smoother transforms. Update Tooltip to only add the mousemove listener when the tooltip is open and include hoverData.open and refs in the effect dependencies to avoid stale listeners.
---
 .../components/inventory/InventoryHotbar.tsx  |  2 +-
 .../components/inventory/InventorySlot.tsx    |  4 +-
 web/src/components/utils/DragPreview.tsx      |  8 ++--
 .../components/utils/ItemNotifications.tsx    |  2 +-
 web/src/components/utils/Tooltip.tsx          | 38 ++++++++++---------
 5 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/web/src/components/inventory/InventoryHotbar.tsx b/web/src/components/inventory/InventoryHotbar.tsx
index 6725bba5ae..caad53b673 100644
--- a/web/src/components/inventory/InventoryHotbar.tsx
+++ b/web/src/components/inventory/InventoryHotbar.tsx
@@ -31,7 +31,7 @@ const InventoryHotbar: React.FC = () => {
           <div
             className="hotbar-item-slot"
             style={{
-              backgroundImage: `url(${item?.name ? getItemUrl(item as SlotWithItem) : 'none'}`,
+              backgroundImage: item?.name ? `url(${getItemUrl(item as SlotWithItem)})` : 'none',
             }}
             key={`hotbar-${item.slot}`}
           >
diff --git a/web/src/components/inventory/InventorySlot.tsx b/web/src/components/inventory/InventorySlot.tsx
index 12de155d08..c7aa461dfa 100644
--- a/web/src/components/inventory/InventorySlot.tsx
+++ b/web/src/components/inventory/InventorySlot.tsx
@@ -49,7 +49,7 @@ const InventorySlot: React.ForwardRefRenderFunction<HTMLDivElement, SlotProps> =
                 name: item.name,
                 slot: item.slot,
               },
-              image: item?.name && `url(${getItemUrl(item) || 'none'}`,
+              image: item?.name ? `url(${getItemUrl(item)})` : 'none',
             }
           : null,
       canDrag,
@@ -131,7 +131,7 @@ const InventorySlot: React.ForwardRefRenderFunction<HTMLDivElement, SlotProps> =
             ? 'brightness(80%) grayscale(100%)'
             : undefined,
         opacity: isDragging ? 0.4 : 1.0,
-        backgroundImage: `url(${item?.name ? getItemUrl(item as SlotWithItem) : 'none'}`,
+        backgroundImage: item?.name ? `url(${getItemUrl(item as SlotWithItem)})` : 'none',
         border: isOver ? '1px dashed rgba(255,255,255,0.4)' : '',
       }}
     >
diff --git a/web/src/components/utils/DragPreview.tsx b/web/src/components/utils/DragPreview.tsx
index 2051fa2c17..b256ffd4b4 100644
--- a/web/src/components/utils/DragPreview.tsx
+++ b/web/src/components/utils/DragPreview.tsx
@@ -30,12 +30,12 @@ export const calculatePointerPosition = (monitor: DragLayerMonitor, childRef: Re
     return null;
   }
 
-  if (!childRef.current || !childRef.current.getBoundingClientRect) {
+  if (!childRef.current) {
     return subtract(offset, calculateParentOffset(monitor));
   }
 
-  const bb = childRef.current.getBoundingClientRect();
-  const middle = { x: bb.width / 2, y: bb.height / 2 };
+  const el = childRef.current as HTMLElement;
+  const middle = { x: el.clientWidth / 2, y: el.clientHeight / 2 };
   return subtract(offset, middle);
 };
 
@@ -55,7 +55,7 @@ const DragPreview: React.FC = () => {
           className="item-drag-preview"
           ref={element}
           style={{
-            transform: `translate(${currentOffset.x}px, ${currentOffset.y}px)`,
+            transform: `translate3d(${currentOffset.x}px, ${currentOffset.y}px, 0)`,
             backgroundImage: data.image,
           }}
         />
diff --git a/web/src/components/utils/ItemNotifications.tsx b/web/src/components/utils/ItemNotifications.tsx
index 5a6eb6eb58..a8c5e7d65c 100644
--- a/web/src/components/utils/ItemNotifications.tsx
+++ b/web/src/components/utils/ItemNotifications.tsx
@@ -32,7 +32,7 @@ const ItemNotification = React.forwardRef(
       <div
         className="item-notification-item-box"
         style={{
-          backgroundImage: `url(${getItemUrl(slotItem) || 'none'}`,
+          backgroundImage: slotItem ? `url(${getItemUrl(slotItem)})` : 'none',
           ...props.style,
         }}
         ref={ref}
diff --git a/web/src/components/utils/Tooltip.tsx b/web/src/components/utils/Tooltip.tsx
index 2dfbe55341..dc1ac3babe 100644
--- a/web/src/components/utils/Tooltip.tsx
+++ b/web/src/components/utils/Tooltip.tsx
@@ -16,30 +16,32 @@ const Tooltip: React.FC = () => {
     duration: 200,
   });
 
-  const handleMouseMove = ({ clientX, clientY }: MouseEvent | React.MouseEvent<unknown, MouseEvent>) => {
-    refs.setPositionReference({
-      getBoundingClientRect() {
-        return {
-          width: 0,
-          height: 0,
-          x: clientX,
-          y: clientY,
-          left: clientX,
-          top: clientY,
-          right: clientX,
-          bottom: clientY,
-        };
-      },
-    });
-  };
-
   useEffect(() => {
+    if (!hoverData.open) return;
+
+    const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: clientX,
+            y: clientY,
+            left: clientX,
+            top: clientY,
+            right: clientX,
+            bottom: clientY,
+          };
+        },
+      });
+    };
+
     window.addEventListener('mousemove', handleMouseMove);
 
     return () => {
       window.removeEventListener('mousemove', handleMouseMove);
     };
-  }, []);
+  }, [hoverData.open, refs]);
 
   return (
     <>