Update style/defaults/style.css

style/defaults/style.css

@@ -1,5 +1,3 @@
-/* viewer.css */
-
 /* Widget container styling */
 .ply-widget-container {
   position: relative;
@@ -109,7 +107,6 @@ progress::-moz-progress-bar {
   background-color: #4682B4;
   border-radius: 10px;
 }
-
 /* Menu (instructions) content styling */
 .menu-content {
   display: none;
@@ -143,7 +140,36 @@ progress::-moz-progress-bar {
   border-radius: 8px;
 }
 
-/* --- Tooltip Panel (tooltip-panel) --- */
+/* CLOSE BUTTON for menu-content - match tooltip-close style */
+.menu-content .help-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  background: #F2F0EF;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 17px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+  transition: background 0.18s;
+  box-sizing: border-box;
+  padding: 0;
+}
+.menu-content .help-close:hover,
+.menu-content .help-close:focus {
+  background: #e0e0e0;
+  outline: none;
+}
+
+/* --------- TOOLTIP PANEL ----------- */
 .tooltip-panel {
   position: absolute;
   top: 50%;
@@ -180,7 +206,7 @@ progress::-moz-progress-bar {
   border-radius: 8px;
 }
 
-/* --- Tooltip Panel Content --- */
+/* Ensure content does not go under close button */
 .tooltip-content {
   width: 100%;
   max-width: 100%;
@@ -235,6 +261,50 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
+/* --- MOBILE adjustments --- */
+@media (max-width: 600px) {
+  .menu-content {
+    width: 85vw;
+    max-height: 90%;
+    overflow: scroll !important;
+    scrollbar-gutter: stable both-edges;
+    padding: 40px 18px 14px;
+    font-size: 14px;
+  }
+  .menu-content .help-close {
+    top: 8px;
+    right: 8px;
+    width: 26px;
+    height: 26px;
+    font-size: 15px;
+  }
+  .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: scroll !important;
+    scrollbar-gutter: stable both-edges;
+  }
+  .tooltip-close {
+    top: 8px;
+    right: 8px;
+    width: 26px;
+    height: 26px;
+    font-size: 15px;
+  }
+  .tooltip-image {
+    max-height: 22vh;
+  }
+}
+
 /* --- MOBILE adjustments --- */
 @media (max-width: 600px) {
   .menu-content {