Update style/defaults/style.css

style/defaults/style.css

@@ -15,7 +15,61 @@
   top: 0 !important;
   left: 0 !important;
   width: 100vw !important;
-  height: 100vh !important;
+  height: 100vh !importaconst menuContent         = document.getElementById('menu-content-' + instanceId);
+// ... other DOM elements ...
+
+const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+const isMobile = isIOS || /Android/i.test(navigator.userAgent);
+
+// ... help text and viewer initialization ...
+
+// --- Responsive menu sizing for mobile: robust fallback JS ---
+function setMenuContentMaxSize() {
+  if (!isMobile) {
+    menuContent.style.maxWidth  = "";
+    menuContent.style.maxHeight = "";
+    menuContent.style.overflowY = "";
+    menuContent.style.overflowX = "";
+    return;
+  }
+  let parent = viewerContainerElem;
+  if (parent) {
+    // Get the parent's size (the viewer's actual rendered box)
+    const vw = parent.offsetWidth;
+    const vh = parent.offsetHeight;
+    if (vw && vh) {
+      // 80% of parent
+      menuContent.style.maxWidth = Math.round(vw * 0.8) + "px";
+      menuContent.style.maxHeight = Math.round(vh * 0.8) + "px";
+      menuContent.style.overflowY = "auto";
+      menuContent.style.overflowX = "auto";
+    } else {
+      // fallback to 80vw/80vh if dimensions are not found
+      menuContent.style.maxWidth = "80vw";
+      menuContent.style.maxHeight = "80vh";
+    }
+  }
+}
+// Initial call
+setMenuContentMaxSize();
+// Update on resize or fullscreen toggle
+window.addEventListener('resize', setMenuContentMaxSize);
+document.addEventListener('fullscreenchange', setMenuContentMaxSize);
+// Optional: update if your viewer supports orientationchange on mobile
+window.addEventListener('orientationchange', setMenuContentMaxSize);
+
+// ... rest of your event listeners and logic (help panel, fullscreen, etc) ...
+
+// Example: show/hide menu-content logic stays unchanged
+menuContent.style.display = (isMobile ? 'none' : 'block'); // Don't show by default on mobile
+
+helpToggle.addEventListener('click', (e) => {
+  hideTooltipPanel();
+  e.stopPropagation();
+  // Only show/hide, the sizing is handled above
+  menuContent.style.display = menuContent.style.display === 'block' ? 'none' : 'block';
+});
+helpCloseBtn.addEventListener('click', () => { menuContent.style.display = 'none'; });nt;
   padding-bottom: 0 !important;
   z-index: 9999 !important;
   background-color: black;
@@ -339,15 +393,15 @@ html, body { margin: 0; padding: 0; height: 100%; }
 .progress-dialog p { margin: 0; padding: 5px; }
 
 @media (max-width: 600px) {
-  .menu-content {
-    width: 85vw;
-    max-height: 55vh;
-    overflow-y: auto;
-    padding: 40px 18px 14px;
-    font-size: 14px;
-  }
-  .menu-content .help-close {
-    top: 6px;
-    right: 6px;
+  .ply-widget-container .menu-content {
+    max-width: 80vw !important;
+    max-height: 80vh !important;
+    overflow-y: auto !important;
+    overflow-x: auto !important;
+    left: 50% !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    box-sizing: border-box !important;
   }
 }
+