@eric-emg/symphiq-components 1.2.83 → 1.2.85

package/fesm2022/symphiq-components.mjs

@@ -11137,13 +11137,27 @@ class TooltipContainerComponent {
             const tooltipWidth = 384;
             const padding = 10;
             const bounds = this.viewportBounds();
-            // Calculate effective viewport width - use actual window edges
-            const effectiveLeft = 0;
-            const effectiveRight = bounds?.right ?? window.innerWidth;
+            // Find transformed ancestor offset
+            const transformedAncestor = this.findTransformedAncestor();
+            const ancestorOffset = transformedAncestor ? transformedAncestor.getBoundingClientRect().left : 0;
+            // Calculate effective viewport boundaries
+            let effectiveLeft = 0;
+            let effectiveRight = window.innerWidth;
+            if (bounds) {
+                // Bounds are in viewport coordinates, adjust them relative to the transformed ancestor
+                effectiveLeft = bounds.left - ancestorOffset;
+                effectiveRight = bounds.right - ancestorOffset;
+            }
+            // Convert effective bounds back to viewport coordinates for comparison
+            const viewportEffectiveLeft = effectiveLeft + ancestorOffset;
+            const viewportEffectiveRight = effectiveRight + ancestorOffset;
             console.log('🎯 [shouldCenter calculation]', {
                 position,
+                ancestorOffset,
                 effectiveLeft,
                 effectiveRight,
+                viewportEffectiveLeft,
+                viewportEffectiveRight,
                 'rect.left': rect.left,
                 'rect.width': rect.width
             });
@@ -11155,8 +11169,8 @@ class TooltipContainerComponent {
             if (position === 'top' || position === 'bottom') {
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
-                const wouldGoOffLeft = centerPosition - halfWidth < effectiveLeft + padding;
-                const wouldGoOffRight = centerPosition + halfWidth > effectiveRight - padding;
+                const wouldGoOffLeft = centerPosition - halfWidth < viewportEffectiveLeft + padding;
+                const wouldGoOffRight = centerPosition + halfWidth > viewportEffectiveRight - padding;
                 const result = !wouldGoOffLeft && !wouldGoOffRight;
                 console.log('🎯 [shouldCenter] top/bottom', {
                     centerPosition,
@@ -11306,37 +11320,46 @@ class TooltipContainerComponent {
         switch (position) {
             case 'top':
             case 'bottom': {
-                // rect.left is relative to viewport, so we don't need to adjust for viewportBounds
-                // The tooltip is positioned fixed relative to the viewport too
+                // rect.left is in viewport coordinates
+                // We need to check bounds in the same coordinate system (viewport)
+                // So add ancestorOffset back to effectiveLeft/Right for comparison
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
-                // Check if centered tooltip would go off bounds
-                const wouldGoOffLeft = centerPosition - halfWidth < effectiveLeft + padding;
-                const wouldGoOffRight = centerPosition + halfWidth > effectiveRight - padding;
+                // Convert effective bounds back to viewport coordinates for comparison
+                const viewportEffectiveLeft = effectiveLeft + ancestorOffset;
+                const viewportEffectiveRight = effectiveRight + ancestorOffset;
+                // Check if centered tooltip would go off bounds (all in viewport coordinates)
+                const wouldGoOffLeft = centerPosition - halfWidth < viewportEffectiveLeft + padding;
+                const wouldGoOffRight = centerPosition + halfWidth > viewportEffectiveRight - padding;
                 console.log('📍 [Tooltip top/bottom calculation]', {
                     centerPosition,
                     halfWidth,
+                    ancestorOffset,
+                    effectiveLeft,
+                    effectiveRight,
+                    viewportEffectiveLeft,
+                    viewportEffectiveRight,
                     'centerPosition - halfWidth': centerPosition - halfWidth,
                     'centerPosition + halfWidth': centerPosition + halfWidth,
                     wouldGoOffLeft,
                     wouldGoOffRight,
-                    'effectiveLeft + padding': effectiveLeft + padding,
-                    'effectiveRight - padding': effectiveRight - padding
+                    'viewportEffectiveLeft + padding': viewportEffectiveLeft + padding,
+                    'viewportEffectiveRight - padding': viewportEffectiveRight - padding
                 });
                 if (wouldGoOffLeft) {
-                    // Align to left edge with padding
-                    const result = effectiveLeft + padding + halfWidth - ancestorOffset;
-                    console.log('⬅️ [Tooltip adjusting LEFT]', { result, ancestorOffset });
+                    // Align to left edge with padding (no transform applied, so this is the actual left edge)
+                    const result = effectiveLeft + padding;
+                    console.log('⬅️ [Tooltip adjusting LEFT]', { result, effectiveLeft, tooltipWidth });
                     return result;
                 }
                 else if (wouldGoOffRight) {
-                    // Align to right edge with padding
-                    const result = effectiveRight - padding - halfWidth - ancestorOffset;
-                    console.log('➡️ [Tooltip adjusting RIGHT]', { result, ancestorOffset });
+                    // Align to right edge with padding (no transform applied, so this is the actual left edge)
+                    const result = effectiveRight - padding - tooltipWidth;
+                    console.log('➡️ [Tooltip adjusting RIGHT]', { result, effectiveRight, tooltipWidth });
                     return result;
                 }
                 else {
-                    // Center normally (transform will be applied)
+                    // Center normally (transform will be applied to shift by -50%)
                     const result = centerPosition - ancestorOffset;
                     console.log('🎯 [Tooltip centered]', { centerPosition, ancestorOffset, result });
                     return result;