Update style/defaults/style.css

style/defaults/style.css

@@ -1,4 +1,3 @@
-
 /* viewer.css */
 
 /* Widget container styling */
@@ -110,13 +109,14 @@ progress::-moz-progress-bar {
   background-color: #4682B4;
   border-radius: 10px;
 }
+
 /* Menu (instructions) content styling */
 .menu-content {
   display: none;
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
-  background: rgba(242,240,239,0.9);
+  background: rgba(242,240,239,0.87);   /* Slightly more transparent */
   color: #545454;
   border: 1px solid #ddd;
   border-radius: 10px;
@@ -126,13 +126,12 @@ progress::-moz-progress-bar {
   box-shadow: none;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   z-index: 1010;
-  max-width: 90vw;       /* Do not exceed viewport width */
-  max-height: 90%;       /* <<< NEW: Do not exceed 90% of viewer container */
-  overflow-y: auto;      /* Scroll vertically if needed */
-  overflow-x: auto;      /* Prevent overflow horizontally */
+  max-width: 90vw;
+  max-height: 90%;
+  overflow-y: auto;
+  overflow-x: auto;
   box-sizing: border-box;
 }
-
 .help-close {
   position: absolute;
   top: 8px;
@@ -182,9 +181,6 @@ progress::-moz-progress-bar {
 :-moz-full-screen .widget-button,
 :-ms-fullscreen .widget-button { z-index: 10000; }
 
-/* --------- TOOLTIP PANEL ----------- */
-/* ...rest of your CSS remains unchanged... */
-
 /* --------- TOOLTIP PANEL ----------- */
 .tooltip-panel {
   position: absolute;
@@ -210,33 +206,6 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
-@media (max-width: 600px) {
-  .tooltip-panel {
-    top: auto;
-    bottom: 8px;
-    left: 3vw;
-    right: 3vw;
-    transform: none;
-    width: auto;
-    max-width: 94vw;
-    min-width: 0;
-    max-height: 55%;
-    padding: 20px 10px 12px 10px;
-    font-size: 13.5px;
-    overflow: auto;
-  }
-  .tooltip-close {
-    top: 8px;
-    right: 8px;
-    width: 26px;
-    height: 26px;
-    font-size: 15px;
-  }
-  .tooltip-image {
-    max-height: 22vh;
-  }
-}
-
 /* Ensure content does not go under close button */
 .tooltip-content {
   width: 100%;
@@ -300,53 +269,34 @@ progress::-moz-progress-bar {
 
 /* --- MOBILE adjustments --- */
 @media (max-width: 600px) {
-  .tooltip-panel {
-    top: auto;
-    bottom: 8px;
-    right: 3vw;
-    left: 3vw;
-    transform: none;
-    width: auto;
-    max-width: 94vw;
-    min-width: 0;
-    max-height: 55vh;
-    padding: 16px 10px 12px 10px;
-    font-size: 13.5px;
-  }
-  .tooltip-close {
-    top: 8px;
-    right: 8px;
-    width: 26px;
-    height: 26px;
-    font-size: 15px;
+  .menu-content {
+    width: 85vw;
+    max-height: 90%;
+    overflow-y: auto;
+    padding: 40px 18px 14px;
+    font-size: 14px;
   }
-  .tooltip-image {
-    max-height: 22vh;
+  .menu-content .help-close {
+    top: 6px;
+    right: 6px;
   }
-}
-
-
-/* --- Mobile adjustments --- */
-@media (max-width: 600px) {
   .tooltip-panel {
     top: auto;
     bottom: 8px;
-    right: 3vw;
     left: 3vw;
+    right: 3vw;
     transform: none;
     width: auto;
     max-width: 94vw;
     min-width: 0;
-    max-height: 55vh;
-    padding: 28px 14px 12px 12px; /* extra for top, right */
+    max-height: 55%;
+    padding: 20px 10px 12px 10px;
     font-size: 13.5px;
-  }
-  .tooltip-content {
-    min-width: 0;
+    overflow: auto;
   }
   .tooltip-close {
-    top: 6px;
-    right: 6px;
+    top: 8px;
+    right: 8px;
     width: 26px;
     height: 26px;
     font-size: 15px;
@@ -370,17 +320,3 @@ progress::-moz-progress-bar {
 #application-canvas { width: 100%; height: 100%; display: block; }
 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: 90%;
-    overflow-y: auto;
-    padding: 40px 18px 14px;
-    font-size: 14px;
-  }
-  .menu-content .help-close {
-    top: 6px;
-    right: 6px;
-  }
-}