@eric-emg/symphiq-components 1.2.62 → 1.2.64

package/fesm2022/symphiq-components.mjs

@@ -11192,8 +11192,21 @@ class TooltipContainerComponent {
         const padding = 10;
         const bounds = this.viewportBounds();
         // Calculate effective viewport boundaries
-        const effectiveLeft = bounds?.left ?? 0;
+        // Only use actual window edges (0 and window.innerWidth) for constraints
+        // Don't let container bounds force tooltips away from edges
+        const effectiveLeft = 0;
         const effectiveRight = bounds?.right ?? window.innerWidth;
+        console.log('🔍 [Tooltip calculateLeft]', {
+            position,
+            'rect.left': rect.left,
+            'rect.right': rect.right,
+            'rect.width': rect.width,
+            tooltipWidth,
+            bounds,
+            effectiveLeft,
+            effectiveRight,
+            'window.innerWidth': window.innerWidth
+        });
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
@@ -11215,16 +11228,31 @@ class TooltipContainerComponent {
                 // Check if centered tooltip would go off bounds
                 const wouldGoOffLeft = centerPosition - halfWidth < effectiveLeft + padding;
                 const wouldGoOffRight = centerPosition + halfWidth > effectiveRight - padding;
+                console.log('📍 [Tooltip top/bottom calculation]', {
+                    centerPosition,
+                    halfWidth,
+                    'centerPosition - halfWidth': centerPosition - halfWidth,
+                    'centerPosition + halfWidth': centerPosition + halfWidth,
+                    wouldGoOffLeft,
+                    wouldGoOffRight,
+                    'effectiveLeft + padding': effectiveLeft + padding,
+                    'effectiveRight - padding': effectiveRight - padding
+                });
                 if (wouldGoOffLeft) {
                     // Align to left edge with padding
-                    return effectiveLeft + padding + halfWidth;
+                    const result = effectiveLeft + padding + halfWidth;
+                    console.log('⬅️ [Tooltip adjusting LEFT]', { result });
+                    return result;
                 }
                 else if (wouldGoOffRight) {
                     // Align to right edge with padding
-                    return effectiveRight - padding - halfWidth;
+                    const result = effectiveRight - padding - halfWidth;
+                    console.log('➡️ [Tooltip adjusting RIGHT]', { result });
+                    return result;
                 }
                 else {
                     // Center normally (transform will be applied)
+                    console.log('🎯 [Tooltip centered]', { centerPosition });
                     return centerPosition;
                 }
             }
@@ -11232,20 +11260,28 @@ class TooltipContainerComponent {
                 const leftPosition = rect.left - tooltipWidth - 8;
                 // If tooltip would go off left edge, position it to the right instead
                 if (leftPosition < effectiveLeft + padding) {
-                    return rect.right + 8;
+                    const result = rect.right + 8;
+                    console.log('⬅️➡️ [Tooltip LEFT flipped to RIGHT]', { leftPosition, result });
+                    return result;
                 }
+                console.log('⬅️ [Tooltip LEFT]', { leftPosition });
                 return leftPosition;
             }
             case 'right': {
                 const rightPosition = rect.right + 8;
                 // If tooltip would go off right edge, position it to the left instead
                 if (rightPosition + tooltipWidth > effectiveRight - padding) {
-                    return rect.left - tooltipWidth - 8;
+                    const result = rect.left - tooltipWidth - 8;
+                    console.log('➡️⬅️ [Tooltip RIGHT flipped to LEFT]', { rightPosition, result });
+                    return result;
                 }
+                console.log('➡️ [Tooltip RIGHT]', { rightPosition });
                 return rightPosition;
             }
             default:
-                return rect.left + rect.width / 2;
+                const defaultResult = rect.left + rect.width / 2;
+                console.log('🔄 [Tooltip DEFAULT]', { defaultResult });
+                return defaultResult;
         }
     }
     calculateTop() {
@@ -11258,7 +11294,8 @@ class TooltipContainerComponent {
         const padding = 10;
         const bounds = this.viewportBounds();
         // Calculate effective viewport boundaries
-        const effectiveTop = bounds?.top ?? 0;
+        // Use actual window edges for constraints
+        const effectiveTop = 0;
         const effectiveBottom = bounds?.bottom ?? window.innerHeight;
         // Estimate tooltip height based on type
         let estimatedHeight = 100;