Update interface.js

interface.js

@@ -141,12 +141,13 @@ const currentScriptTag = document.currentScript;
       '- Cliquez sur ⇱ pour passer en plein écran.<br>';
   }
 
-
-    // --- Limit menu-content max size to 80% of the viewer (on mobile) ---
+  // --- DYNAMIC MENU SIZING ---
   function setMenuContentMaxSize() {
     if (!isMobile) {
       menuContent.style.maxWidth  = "";
       menuContent.style.maxHeight = "";
+      menuContent.style.width     = "";
+      menuContent.style.height    = "";
       menuContent.style.overflowY = "";
       menuContent.style.overflowX = "";
       return;
@@ -158,11 +159,15 @@ const currentScriptTag = document.currentScript;
       if (vw && vh) {
         menuContent.style.maxWidth = Math.round(vw * 0.8) + "px";
         menuContent.style.maxHeight = Math.round(vh * 0.8) + "px";
+        menuContent.style.width = "";  // Let it shrink if smaller
+        menuContent.style.height = "";
         menuContent.style.overflowY = "auto";
         menuContent.style.overflowX = "auto";
       } else {
         menuContent.style.maxWidth = "80vw";
         menuContent.style.maxHeight = "80vh";
+        menuContent.style.overflowY = "auto";
+        menuContent.style.overflowX = "auto";
       }
     }
   }
@@ -170,8 +175,8 @@ const currentScriptTag = document.currentScript;
   window.addEventListener('resize', setMenuContentMaxSize);
   document.addEventListener('fullscreenchange', setMenuContentMaxSize);
   window.addEventListener('orientationchange', setMenuContentMaxSize);
-  
 
+  // --- HELP PANEL DEFAULT VISIBILITY ---
   menuContent.style.display = isMobile ? 'none' : 'block';
 
   viewerContainerElem.style.display = 'block';
@@ -270,6 +275,7 @@ const currentScriptTag = document.currentScript;
     if (fullscreenToggle) fullscreenToggle.textContent = '⇱';
 
     savedState = null;
+    setMenuContentMaxSize();
   }
 
   function applyFullscreenStyles() {
@@ -296,6 +302,7 @@ const currentScriptTag = document.currentScript;
 
     if (fullscreenToggle) fullscreenToggle.textContent = '⇲';
     isFullscreen = true;
+    setMenuContentMaxSize();
   }
 
   function enterFullscreen() {
@@ -324,6 +331,7 @@ const currentScriptTag = document.currentScript;
     restoreOriginalStyles();
     isFullscreen = false;
     if (fullscreenToggle) fullscreenToggle.textContent = '⇱';
+    setMenuContentMaxSize();
   }
 
   fullscreenToggle.addEventListener('click', () => {
@@ -339,12 +347,19 @@ const currentScriptTag = document.currentScript;
     } else if (document.fullscreenElement === widgetContainer) {
       if (fullscreenToggle) fullscreenToggle.textContent = '⇲';
     }
+    setMenuContentMaxSize();
   });
 
   helpToggle.addEventListener('click', (e) => {
     hideTooltipPanel();
     e.stopPropagation();
-    menuContent.style.display = menuContent.style.display === 'block' ? 'none' : 'block';
+    // Toggle menu panel
+    if (menuContent.style.display === 'block') {
+      menuContent.style.display = 'none';
+    } else {
+      menuContent.style.display = 'block';
+      setMenuContentMaxSize();
+    }
   });
   helpCloseBtn.addEventListener('click', hideHelpPanel);
 
@@ -368,7 +383,7 @@ const currentScriptTag = document.currentScript;
 
   tooltipCloseBtn.addEventListener('click', hideTooltipPanel);
 
-    document.addEventListener('tooltip-selected', (evt) => {
+  document.addEventListener('tooltip-selected', (evt) => {
     // Always show panel, cancel hide first
     if (dragHide) {
       viewerContainerElem.removeEventListener('pointermove', dragHide);
@@ -416,11 +431,13 @@ const currentScriptTag = document.currentScript;
         );
       }
     }
+    setMenuContentMaxSize();
   });
 
   setTimeout(() => {
     saveCurrentState();
     document.dispatchEvent(new CustomEvent('toggle-tooltips', { detail: { visible: !!config.showTooltipsDefault } }));
+    setMenuContentMaxSize();
   }, 200);
 
 })();