chore: bump version from 7.3.11 to 7.3.12 and fix tooltip positioning issues in the history page

Admin9705 · Admin9705 · commit 2bdd13e4fd1c · 2025-05-25T11:39:03.000-04:00
diff --git a/.github/MEMORY.md b/.github/MEMORY.md
@@ -10,7 +10,8 @@
 2. **Countdown Timer Startup** - Changed "Error Loading" to "Waiting for Cycle" during startup
 3. **Reset Button Behavior** - Improved "Refreshing" feedback to stay until genuinely new data is available
 4. **Sonarr Season Packs API Fix** - Fixed double-counting of API calls in season packs mode
-5. **Development Guidelines** - Added version number management guidelines
+5. **History Page Tooltip Fix** - Fixed JSON popup tooltips being obscured after page refresh
+6. **Development Guidelines** - Added version number management guidelines
 
 **Files Modified:**
 - `frontend/static/js/new-main.js` - Low usage mode detection and stats display fixes
@@ -19,6 +20,8 @@
 - `src/primary/stats_manager.py` - Added stats-only increment function
 - `src/primary/apps/sonarr/missing.py` - Fixed season pack stats tracking
 - `src/primary/apps/sonarr/upgrade.py` - Fixed season pack stats tracking
+- `frontend/static/js/history.js` - Fixed tooltip positioning and z-index issues
+- `frontend/templates/components/history_section.html` - Simplified tooltip CSS
 - `.github/listen.MD` - Added version number management guidelines
 
 **Tags:** ["major_release", "ui_improvements", "low_usage_mode", "countdown_timers", "api_limits", "sonarr", "user_experience"]
@@ -206,4 +209,78 @@ for i in range(episode_count):
 
 **Tags:** ["bug_fix", "backend", "sonarr", "api_limits", "season_packs", "stats_tracking"]
 
+## Bug Fix: History Page Tooltip Obscured After Page Refresh (v7.3.10)
+
+**Date:** 2025-05-25  
+**Issue:** JSON popup tooltips in the History page get obscured by other menu items after a page refresh/reload. The tooltip displays correctly initially but becomes hidden behind other elements after refreshing the page.  
+**Root Cause:** The tooltip was using `position: absolute` and being appended as a child of the info icon, which created stacking context issues. After page refresh, the z-index wasn't being properly enforced, causing the tooltip to appear behind other page elements.
+
+**Solution:** 
+1. **Changed positioning approach** - Switched from `position: absolute` to `position: fixed` to escape stacking context issues
+2. **Moved tooltip to document body** - Instead of appending to the icon, append to `document.body` for proper positioning
+3. **Simplified CSS** - Removed complex background layers and animations that were causing conflicts
+4. **Enhanced JavaScript positioning** - Added proper viewport boundary detection and positioning logic
+5. **Removed CSS hover rules** - Handled all tooltip display logic through JavaScript for better control
+
+**Files Modified:**
+- `frontend/static/js/history.js` - Fixed tooltip positioning and event handling
+- `frontend/templates/components/history_section.html` - Simplified tooltip CSS
+
+**Code Changes:**
+```javascript
+// Before: Tooltip appended to icon with absolute positioning
+infoIcon.appendChild(tooltip);
+tooltip.style.position = 'absolute';
+
+// After: Tooltip appended to body with fixed positioning
+document.body.appendChild(tooltip);
+tooltip.style.position = 'fixed';
+
+// Enhanced positioning logic
+infoIcon.addEventListener('mouseenter', (e) => {
+    const iconRect = infoIcon.getBoundingClientRect();
+    
+    // Position tooltip near the icon using fixed positioning
+    tooltip.style.left = (iconRect.right + 10) + 'px';
+    tooltip.style.top = iconRect.top + 'px';
+    
+    // Adjust if tooltip would go off screen
+    const tooltipWidth = 350;
+    if (iconRect.right + tooltipWidth + 10 > window.innerWidth) {
+        tooltip.style.left = (iconRect.left - tooltipWidth - 10) + 'px';
+    }
+    
+    // Adjust if tooltip would go off bottom of screen
+    const tooltipHeight = 300;
+    if (iconRect.top + tooltipHeight > window.innerHeight) {
+        tooltip.style.top = (window.innerHeight - tooltipHeight - 10) + 'px';
+    }
+    
+    tooltip.style.display = 'block';
+});
+```
+
+**CSS Changes:**
+```css
+/* Before: Complex positioning with multiple layers */
+.json-tooltip {
+    position: absolute !important;
+    /* Complex background layers and animations */
+}
+
+/* After: Simple fixed positioning */
+.json-tooltip {
+    display: none;
+    position: fixed; /* Use fixed positioning to escape stacking context issues */
+    z-index: 999999; /* Very high z-index */
+    pointer-events: none; /* Prevent tooltip from interfering with mouse events */
+}
+```
+
+**Impact:** Tooltips now display correctly both on initial page load and after page refresh, with proper positioning that respects viewport boundaries.
+
+**Testing:** Verified that container starts successfully and tooltips work properly in all scenarios.
+
+**Tags:** ["bug_fix", "frontend", "history_page", "tooltips", "z_index", "positioning", "ui_improvement"]
+
 --- 
diff --git a/frontend/static/js/history.js b/frontend/static/js/history.js
@@ -263,38 +263,7 @@ const historyModule = {
             // Create tooltip element for JSON data
             const tooltip = document.createElement('div');
             tooltip.className = 'json-tooltip';
-            
-            // Add a solid background backing div to ensure no transparency
-            const solidBackground = document.createElement('div');
-            solidBackground.style.position = 'absolute';
-            solidBackground.style.top = '0';
-            solidBackground.style.left = '0';
-            solidBackground.style.width = '100%';
-            solidBackground.style.height = '100%';
-            solidBackground.style.backgroundColor = '#121824'; // Solid dark background
-            solidBackground.style.zIndex = '1';
-            solidBackground.style.borderRadius = '5px';
-            tooltip.appendChild(solidBackground);
-            
-            // Add another solid layer for extra opacity
-            const extraLayer = document.createElement('div');
-            extraLayer.style.position = 'absolute';
-            extraLayer.style.top = '0';
-            extraLayer.style.left = '0';
-            extraLayer.style.width = '100%';
-            extraLayer.style.height = '100%';
-            extraLayer.style.backgroundColor = '#0c111d';
-            extraLayer.style.opacity = '0.9';
-            extraLayer.style.zIndex = '2';
-            extraLayer.style.borderRadius = '5px';
-            tooltip.appendChild(extraLayer);
-            
-            // Create a container for content that sits above the background
-            const contentContainer = document.createElement('div');
-            contentContainer.style.position = 'relative';
-            contentContainer.style.zIndex = '5'; // Higher z-index to ensure content is on top
-            contentContainer.style.pointerEvents = 'auto';
-            tooltip.appendChild(contentContainer);
+            tooltip.style.display = 'none';
             
             // Format the JSON data for display
             let jsonData = {};
@@ -318,41 +287,42 @@ const historyModule = {
             const pre = document.createElement('pre');
             pre.className = 'json-content';
             pre.textContent = JSON.stringify(jsonData, null, 2);
-            contentContainer.appendChild(pre);
+            tooltip.appendChild(pre);
             
-            // Add the tooltip to the icon
-            infoIcon.appendChild(tooltip);
+            // Add the tooltip to the document body for fixed positioning
+            document.body.appendChild(tooltip);
+            
+            // Add hover events with proper positioning
+            infoIcon.addEventListener('mouseenter', (e) => {
+                const iconRect = infoIcon.getBoundingClientRect();
+                
+                // Position tooltip near the icon using fixed positioning
+                tooltip.style.left = (iconRect.right + 10) + 'px';
+                tooltip.style.top = iconRect.top + 'px';
+                
+                // Adjust if tooltip would go off screen
+                const tooltipWidth = 350;
+                if (iconRect.right + tooltipWidth + 10 > window.innerWidth) {
+                    tooltip.style.left = (iconRect.left - tooltipWidth - 10) + 'px';
+                }
+                
+                // Adjust if tooltip would go off bottom of screen
+                const tooltipHeight = 300; // max-height from CSS
+                if (iconRect.top + tooltipHeight > window.innerHeight) {
+                    tooltip.style.top = (window.innerHeight - tooltipHeight - 10) + 'px';
+                }
+                
+                tooltip.style.display = 'block';
+            });
+            
+            // Add mouse leave event to hide tooltip
+            infoIcon.addEventListener('mouseleave', () => {
+                tooltip.style.display = 'none';
+            });
             
-            // Add positioning logic to prevent the tooltip from being cut off
-            infoIcon.addEventListener('mouseenter', () => {
-                setTimeout(() => {
-                    // Get positions
-                    const iconRect = infoIcon.getBoundingClientRect();
-                    const tooltipRect = tooltip.getBoundingClientRect();
-                    const viewportWidth = window.innerWidth;
-                    
-                    // Position the tooltip to the right of the icon by default
-                    let leftPos = 35; // Start with offset to the right
-                    let topPos = '100%';
-                    
-                    // If tooltip would go off the right edge
-                    if (iconRect.left + tooltipRect.width > viewportWidth) {
-                        // Move it to the left so it stays within the viewport
-                        const overflow = iconRect.left + tooltipRect.width - viewportWidth;
-                        leftPos = -overflow - 20; // 20px padding from edge
-                    }
-                    
-                    // Check if tooltip would go off the bottom edge
-                    const viewportHeight = window.innerHeight;
-                    if (iconRect.bottom + tooltipRect.height > viewportHeight) {
-                        // Position above the icon instead
-                        topPos = `-${tooltipRect.height}px`;
-                    }
-                    
-                    // Apply the calculated positions
-                    tooltip.style.left = `${leftPos}px`;
-                    tooltip.style.top = topPos;
-                }, 0);
+            // Also hide tooltip when mouse enters the tooltip itself and then leaves
+            tooltip.addEventListener('mouseleave', () => {
+                tooltip.style.display = 'none';
             });
             
             // Create a container div to hold both icon and title on the same line
diff --git a/frontend/templates/components/history_section.html b/frontend/templates/components/history_section.html
@@ -598,86 +598,36 @@
     /* Hide the tooltip by default */
     .json-tooltip {
         display: none;
-        position: absolute;
-        left: 35px; /* Move the tooltip to the right by default */
-        top: 100%;
-        /* Extra thick solid background with absolutely no transparency */
+        position: fixed; /* Use fixed positioning to escape stacking context issues */
+        left: 0;
+        top: 0;
         background-color: #121824;
-        /* Add a thick dark background behind content */
-        background-image: 
-            linear-gradient(to bottom, 
-                #121824 0%, 
-                #0c111d 100%);
-        /* Double border for better definition */
-        border: 3px solid #2185d0;
+        border: 2px solid #2185d0;
         border-radius: 8px;
         padding: 10px;
         width: 350px;
         max-height: 300px;
         overflow-y: auto;
-        z-index: 999999; /* Super high z-index */
+        z-index: 999999; /* Very high z-index */
         font-family: monospace;
         font-size: 12px;
-        color: #ffffff; /* Pure white text */
+        color: #ffffff;
         text-align: left;
         white-space: pre-wrap;
-        /* Force complete opacity */
-        opacity: 1 !important;
-        /* Strong glow effect similar to Huntarr logo - more pronounced */
-        box-shadow: 
-            0 0 0 4px #121824, /* Thick barrier */
-            0 0 0 5px #2185d0, /* Border highlight */
-            0 0 20px 5px #2185d0, /* Much stronger blue glow */
-            0 5px 15px rgba(0, 0, 0, 0.9); /* Deep shadow */
-        /* Animation for the glow effect - faster to be more noticeable */
-        animation: tooltipGlow 2s ease-in-out infinite alternate;
-    }
-    
-    /* Glowing border animation */
-    @keyframes tooltipGlow {
-        0% {
-            box-shadow: 
-                0 0 0 4px #121824, /* Solid barrier */
-                0 0 0 5px #2185d0, /* Blue border */
-                0 0 25px 8px #2185d0, /* Much stronger blue glow */
-                0 5px 15px rgba(0, 0, 0, 0.9); /* Deep shadow */
-            border-color: #2185d0;
-        }
-        50% {
-            box-shadow: 
-                0 0 0 4px #121824, /* Solid barrier */
-                0 0 0 5px #9b59b6, /* Brighter purple border */
-                0 0 25px 8px #9b59b6, /* Much stronger purple glow */
-                0 5px 15px rgba(0, 0, 0, 0.9); /* Deep shadow */
-            border-color: #9b59b6;
-        }
-        100% {
-            box-shadow: 
-                0 0 0 4px #121824, /* Solid barrier */
-                0 0 0 5px #2185d0, /* Blue border */
-                0 0 25px 8px #2185d0, /* Much stronger blue glow */
-                0 5px 15px rgba(0, 0, 0, 0.9); /* Deep shadow */
-            border-color: #2185d0;
-        }
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
+        pointer-events: none; /* Prevent tooltip from interfering with mouse events */
     }
     
+
+    
     /* Style the JSON content */
     .json-content {
         margin: 0;
         white-space: pre-wrap;
         word-break: break-word;
     }
     
-    /* Show tooltip on hover */
-    .info-hover-icon:hover .json-tooltip {
-        display: block;
-        animation: fadeIn 0.3s ease;
-    }
-    
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(-10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
+
     
     /* Processed title styling */
     .processed-title {
diff --git a/version.txt b/version.txt
@@ -1 +1 @@
-7.3.11
+7.3.12
