Update style/defaults/style.css

style/defaults/style.css

@@ -1,3 +1,4 @@
+
 /* viewer.css */
 
 /* Widget container styling */
@@ -115,7 +116,7 @@ progress::-moz-progress-bar {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
-  background: rgba(242,240,239,0.7);   /* Slightly reduced opacity */
+  background: rgba(242,240,239,0.9);
   color: #545454;
   border: 1px solid #ddd;
   border-radius: 10px;
@@ -125,12 +126,13 @@ 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;
-  max-height: 90%;
-  overflow-y: auto;
-  overflow-x: auto;
+  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 */
   box-sizing: border-box;
 }
+
 .help-close {
   position: absolute;
   top: 8px;
@@ -180,6 +182,9 @@ 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;
@@ -190,7 +195,7 @@ progress::-moz-progress-bar {
   color: #545454;
   border: 1px solid #ddd;
   border-radius: 6px;
-  padding: 20px 20px 16px 16px;
+  padding: 20px 20px 16px 16px;  /* Extra top/right for button */
   max-width: 340px;
   width: 92vw;
   min-width: 180px;
@@ -203,8 +208,10 @@ progress::-moz-progress-bar {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   overflow: auto;
   box-sizing: border-box;
+  position: absolute;
 }
 
+/* Ensure content does not go under close button */
 .tooltip-content {
   width: 100%;
   min-width: 160px;
@@ -217,6 +224,7 @@ progress::-moz-progress-bar {
   margin-top: 0;
 }
 
+/* CLOSE BUTTON AS SQUARE WITH ROUNDED CORNERS */
 .tooltip-close {
   position: absolute;
   top: 12px;
@@ -245,6 +253,7 @@ progress::-moz-progress-bar {
   outline: none;
 }
 
+/* Tooltip text and image */
 .tooltip-text {
   margin-bottom: 10px;
   font-size: 14px;
@@ -263,7 +272,7 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
-/* -------- MOBILE ADJUSTMENTS -------- */
+/* --- MOBILE adjustments --- */
 @media (max-width: 600px) {
   .tooltip-panel {
     top: auto;
@@ -275,7 +284,7 @@ progress::-moz-progress-bar {
     max-width: 94vw;
     min-width: 0;
     max-height: 55vh;
-    padding: 20px 10px 12px 10px;
+    padding: 16px 10px 12px 10px;
     font-size: 13.5px;
   }
   .tooltip-close {
@@ -288,16 +297,36 @@ progress::-moz-progress-bar {
   .tooltip-image {
     max-height: 22vh;
   }
-  .menu-content {
-    width: 85vw;
-    max-height: 90%;
-    overflow-y: auto;
-    padding: 40px 18px 14px;
-    font-size: 14px;
+}
+
+
+/* --- 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: 28px 14px 12px 12px; /* extra for top, right */
+    font-size: 13.5px;
   }
-  .menu-content .help-close {
+  .tooltip-content {
+    min-width: 0;
+  }
+  .tooltip-close {
     top: 6px;
     right: 6px;
+    width: 26px;
+    height: 26px;
+    font-size: 15px;
+  }
+  .tooltip-image {
+    max-height: 22vh;
   }
 }
 
@@ -315,3 +344,17 @@ 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;
+  }
+}