Solution 5: JavaScript override of mobile detection + manual tab switching

- Override navigator.maxTouchPoints and platform to fake desktop
- Manually implement tab panel showing/hiding via JavaScript
- Intercept tab clicks and control display with CSS display property
- Bypasses Gradio's broken mobile tab handling completely

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app.py

@@ -1281,6 +1281,18 @@ custom_css = """
 
 custom_js = """
 function() {
+    // Force desktop mode - override mobile detection
+    Object.defineProperty(navigator, 'maxTouchPoints', {
+        get: () => 0
+    });
+
+    // Override platform if needed
+    try {
+        Object.defineProperty(navigator, 'platform', {
+            get: () => 'MacIntel'
+        });
+    } catch(e) {}
+
     // Add click-to-expand functionality for the plot
     document.addEventListener('click', function(e) {
         const plot = e.target.closest('.expandable-plot');
@@ -1299,41 +1311,62 @@ function() {
         }
     });
 
-    // Fix mobile tab clicks - comprehensive touch handling
-    function fixMobileTabs() {
+    // Aggressive tab fixing - manually control tab panels
+    function forceTabSwitching() {
         const tabs = document.querySelectorAll('[role="tab"]');
-        tabs.forEach(tab => {
-            // Clear all existing listeners
+        const tabPanels = document.querySelectorAll('[role="tabpanel"]');
+
+        if (tabs.length === 0 || tabPanels.length === 0) return;
+
+        tabs.forEach((tab, index) => {
+            // Remove old listeners by cloning
             const newTab = tab.cloneNode(true);
             tab.parentNode.replaceChild(newTab, tab);
 
-            // Add multiple event types for better mobile support
-            ['touchstart', 'touchend', 'click'].forEach(eventType => {
-                newTab.addEventListener(eventType, function(e) {
-                    if (eventType === 'touchend') {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        // Force focus and click
-                        this.focus();
-                        // Dispatch a synthetic mouse click
-                        const clickEvent = new MouseEvent('click', {
-                            bubbles: true,
-                            cancelable: true,
-                            view: window
-                        });
-                        this.dispatchEvent(clickEvent);
-                    }
-                }, { passive: eventType !== 'touchend' });
-            });
+            // Add new click handler that manually shows/hides panels
+            newTab.addEventListener('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                // Hide all panels
+                tabPanels.forEach(panel => {
+                    panel.style.display = 'none';
+                    panel.setAttribute('aria-hidden', 'true');
+                });
+
+                // Remove selected from all tabs
+                tabs.forEach(t => {
+                    t.setAttribute('aria-selected', 'false');
+                    t.classList.remove('selected');
+                });
+
+                // Show clicked tab's panel
+                if (tabPanels[index]) {
+                    tabPanels[index].style.display = 'block';
+                    tabPanels[index].setAttribute('aria-hidden', 'false');
+                }
+
+                // Mark clicked tab as selected
+                this.setAttribute('aria-selected', 'true');
+                this.classList.add('selected');
+            }, true);
         });
+
+        // Ensure first tab is initially selected
+        if (tabPanels.length > 0) {
+            tabPanels.forEach((panel, i) => {
+                panel.style.display = i === 0 ? 'block' : 'none';
+            });
+        }
     }
 
-    // Run on load and keep monitoring
-    setTimeout(fixMobileTabs, 100);
-    setTimeout(fixMobileTabs, 500);
-    setTimeout(fixMobileTabs, 1000);
+    // Run tab fixing multiple times
+    setTimeout(forceTabSwitching, 200);
+    setTimeout(forceTabSwitching, 800);
+    setTimeout(forceTabSwitching, 1500);
+
     const observer = new MutationObserver(() => {
-        setTimeout(fixMobileTabs, 50);
+        setTimeout(forceTabSwitching, 100);
     });
     observer.observe(document.body, { childList: true, subtree: true });
 }