Solution 6: CSS Transform Scale to force desktop layout on mobile

- Added media query that transforms body at 0.325 scale on mobile
- Forces html/body width to 1200px on screens ≤768px
- Removed complex JavaScript tab handlers (they broke things)
- Last attempt to make desktop experience work on mobile

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

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

app.py

@@ -1276,23 +1276,29 @@ custom_css = """
 }
 
 /* Desktop-only experience - no mobile responsive CSS */
-/* Mobile devices will render the full desktop interface */
+/* Solution 6: Force desktop rendering with CSS transform on mobile */
+
+/* Force desktop viewport behavior on narrow screens */
+@media screen and (max-width: 768px) {
+    html, body {
+        width: 1200px !important;
+        overflow-x: scroll !important;
+    }
+
+    body {
+        transform: scale(0.325);
+        transform-origin: top left;
+        min-height: calc(100vh / 0.325);
+    }
+
+    .gradio-container {
+        width: 1200px !important;
+    }
+}
 """
 
 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');
@@ -1310,65 +1316,6 @@ function() {
             }
         }
     });
-
-    // Aggressive tab fixing - manually control tab panels
-    function forceTabSwitching() {
-        const tabs = document.querySelectorAll('[role="tab"]');
-        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 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 tab fixing multiple times
-    setTimeout(forceTabSwitching, 200);
-    setTimeout(forceTabSwitching, 800);
-    setTimeout(forceTabSwitching, 1500);
-
-    const observer = new MutationObserver(() => {
-        setTimeout(forceTabSwitching, 100);
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
 }
 """