fix: address review feedback

- Copy computed width/height to measurement clone to prevent 0x0
  dimensions when popup size is content-driven (CodeRabbit)
- Use property setter spies in test instead of setProperty proxy
  to catch both direct assignments and setProperty calls (CodeRabbit)
- Add left/top assertions to test for completeness (Gemini)

Author: AnthonyH16

src/hooks/useAlign.ts

@@ -192,6 +192,11 @@ export default function useAlign(
       // (transform: scale()), causing getBoundingClientRect() to return
       // incorrect values and producing wildly wrong popup positions.
       const measureEl = popupElement.cloneNode(false) as HTMLElement;
+      // Copy computed dimensions to the clone since cloneNode(false) produces
+      // an empty element whose size would otherwise collapse to 0x0.
+      const { height, width } = win.getComputedStyle(popupElement);
+      measureEl.style.width = width;
+      measureEl.style.height = height;
       measureEl.style.left = '0';
       measureEl.style.top = '0';
       measureEl.style.right = 'auto';
@@ -226,7 +231,6 @@ export default function useAlign(
       // Measure from the temporary element (not affected by CSS transforms
       // or transitions on the popup).
       const popupRect = measureEl.getBoundingClientRect();
-      const { height, width } = win.getComputedStyle(popupElement);
       popupRect.x = popupRect.x ?? popupRect.left;
       popupRect.y = popupRect.y ?? popupRect.top;
       const {

tests/align.test.tsx

@@ -360,22 +360,45 @@ describe('Trigger.Align', () => {
     ) as HTMLElement;
     expect(popupElement).toBeTruthy();
 
-    // Spy on popup style mutations during alignment
+    // Spy on popup style mutations during alignment using property setter
+    // spies (catches both direct assignment and setProperty)
     const styleChanges: string[] = [];
-    const origSetProperty = popupElement.style.setProperty.bind(popupElement.style);
-    popupElement.style.setProperty = function(prop: string, val: string, priority?: string) {
-      styleChanges.push(prop);
-      return origSetProperty(prop, val, priority || '');
-    };
+    const propsToWatch = ['left', 'top', 'transform', 'transition', 'overflow'];
+    const restoreSpies: (() => void)[] = [];
+
+    propsToWatch.forEach((prop) => {
+      const descriptor = Object.getOwnPropertyDescriptor(
+        CSSStyleDeclaration.prototype,
+        prop,
+      );
+      if (descriptor?.set) {
+        const origSet = descriptor.set;
+        Object.defineProperty(popupElement.style, prop, {
+          set(value: string) {
+            styleChanges.push(prop);
+            origSet.call(this, value);
+          },
+          get: descriptor.get,
+          configurable: true,
+        });
+        restoreSpies.push(() => {
+          Object.defineProperty(popupElement.style, prop, descriptor);
+        });
+      }
+    });
 
     // Trigger re-alignment
     triggerResize(popupElement);
     await awaitFakeTimer();
 
-    // The popup's left/top/transform/transition should not have been
-    // modified directly during measurement (only the final positioning
-    // values should be applied via the React state update, not during
-    // the measurement phase)
+    // Restore original property descriptors
+    restoreSpies.forEach((restore) => restore());
+
+    // The popup's styles should not have been modified directly during
+    // measurement (only the final positioning values should be applied
+    // via the React state update, not during the measurement phase)
+    expect(styleChanges).not.toContain('left');
+    expect(styleChanges).not.toContain('top');
     expect(styleChanges).not.toContain('transform');
     expect(styleChanges).not.toContain('transition');
     expect(styleChanges).not.toContain('overflow');