Update style/defaults/style.css

style/defaults/style.css

@@ -115,7 +115,7 @@ progress::-moz-progress-bar {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
-  background: rgba(242,240,239,0.9);
+  background: rgba(242,240,239,0.82);   /* Slightly reduced opacity */
   color: #545454;
   border: 1px solid #ddd;
   border-radius: 10px;
@@ -125,13 +125,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;
@@ -181,9 +180,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;
@@ -194,7 +190,7 @@ progress::-moz-progress-bar {
   color: #545454;
   border: 1px solid #ddd;
   border-radius: 6px;
-  padding: 20px 20px 16px 16px;  /* Extra top/right for button */
+  padding: 20px 20px 16px 16px;
   max-width: 340px;
   width: 92vw;
   min-width: 180px;
@@ -207,10 +203,8 @@ 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;
@@ -223,7 +217,6 @@ progress::-moz-progress-bar {
   margin-top: 0;
 }
 
-/* CLOSE BUTTON AS SQUARE WITH ROUNDED CORNERS */
 .tooltip-close {
   position: absolute;
   top: 12px;
@@ -252,7 +245,6 @@ progress::-moz-progress-bar {
   outline: none;
 }
 
-/* Tooltip text and image */
 .tooltip-text {
   margin-bottom: 10px;
   font-size: 14px;
@@ -271,7 +263,7 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
-/* --- MOBILE adjustments --- */
+/* -------- MOBILE ADJUSTMENTS -------- */
 @media (max-width: 600px) {
   .tooltip-panel {
     top: auto;
@@ -283,7 +275,7 @@ progress::-moz-progress-bar {
     max-width: 94vw;
     min-width: 0;
     max-height: 55vh;
-    padding: 16px 10px 12px 10px;
+    padding: 20px 10px 12px 10px;
     font-size: 13.5px;
   }
   .tooltip-close {
@@ -296,36 +288,16 @@ progress::-moz-progress-bar {
   .tooltip-image {
     max-height: 22vh;
   }
-}
-
-
-/* --- 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;
-  }
-  .tooltip-content {
-    min-width: 0;
+  .menu-content {
+    width: 85vw;
+    max-height: 90%;
+    overflow-y: auto;
+    padding: 40px 18px 14px;
+    font-size: 14px;
   }
-  .tooltip-close {
+  .menu-content .help-close {
     top: 6px;
     right: 6px;
-    width: 26px;
-    height: 26px;
-    font-size: 15px;
-  }
-  .tooltip-image {
-    max-height: 22vh;
   }
 }
 
@@ -343,18 +315,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;
-  }
-}
-