Update style/defaults/style.css

style/defaults/style.css

@@ -175,6 +175,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;
@@ -185,7 +188,7 @@ progress::-moz-progress-bar {
   color: #545454;
   border: 1px solid #ddd;
   border-radius: 6px;
-  padding: 16px 15px 15px 15px;
+  padding: 20px 20px 16px 16px;  /* Extra top/right for button */
   max-width: 340px;
   width: 92vw;
   min-width: 180px;
@@ -198,14 +201,11 @@ progress::-moz-progress-bar {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   overflow: auto;
   box-sizing: border-box;
-  /* New: ensure padding on right/top for close btn always visible */
-  /* Add a little more space for top/right close btn so it's never hidden */
-  padding-top: 32px;
-  padding-right: 24px;
+  position: absolute;
 }
 
+/* Ensure content does not go under close button */
 .tooltip-content {
-  position: relative;
   width: 100%;
   min-width: 160px;
   max-width: 100%;
@@ -214,33 +214,39 @@ progress::-moz-progress-bar {
   flex-direction: column;
   align-items: flex-start;
   overflow: hidden;
+  margin-top: 0;
 }
+
+/* CLOSE BUTTON AS SQUARE WITH ROUNDED CORNERS */
 .tooltip-close {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  /* Always visible: increased padding above/right in parent */
-  background: #B0B0B0;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  background: #F2F0EF;
   color: #333;
-  border-radius: 50%;
-  width: 28px;
-  height: 28px;
-  border: none;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 17px;
+  font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
-  font-size: 17px;
   line-height: 1;
-  vertical-align: middle;
-  text-align: center;
   cursor: pointer;
-  font-weight: bold;
   z-index: 2;
-  box-shadow: 0 0 2px 0 rgba(0,0,0,0.10);
-  user-select: none;
+  transition: background 0.18s;
+  box-sizing: border-box;
+  padding: 0;
+}
+.tooltip-close:hover,
+.tooltip-close:focus {
+  background: #e0e0e0;
+  outline: none;
 }
-.tooltip-close:active, .tooltip-close:focus { outline: none; background: #9e9e9e; }
+
+/* Tooltip text and image */
 .tooltip-text {
   margin-bottom: 10px;
   font-size: 14px;
@@ -259,6 +265,34 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
+/* --- 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;
+  }
+  .tooltip-image {
+    max-height: 22vh;
+  }
+}
+
+
 /* --- Mobile adjustments --- */
 @media (max-width: 600px) {
   .tooltip-panel {