Update style/defaults/style.css

style/defaults/style.css

@@ -128,60 +128,23 @@ progress::-moz-progress-bar {
   z-index: 1010;
   max-width: 90vw;
   max-height: 90%;
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow: scroll !important;
+  scrollbar-gutter: stable both-edges;
   box-sizing: border-box;
 }
-.help-close {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background-color: #B0B0B0;
-  color: #333;
-  border: none;
-  border-radius: 4px;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-  cursor: pointer;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
+.menu-content::-webkit-scrollbar {
+  width: 10px;
 }
-.widget-button {
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  background-color: #F2F0EF;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 16px;
-  color: #545454;
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease;
-  z-index: 1000;
-  opacity: 1 !important;
-  visibility: visible !important;
-  margin-right: 8px;
+.menu-content::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 6px;
+}
+.menu-content::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 6px;
 }
-.widget-button:hover { background-color: rgba(242,240,239,0.7); }
-.fullscreen-toggle { top: 12px; right: 12px; }
-.help-toggle { top: 12px; right: 52px; font-size: 18px; }
-.reset-camera-btn { top: 12px; right: 92px; font-size: 18px; line-height: normal; padding: 0; }
-.tooltips-toggle { top: 12px; right: 132px; font-size: 18px; }
-.fake-fullscreen .widget-button,
-:fullscreen .widget-button,
-:-webkit-full-screen .widget-button,
-:-moz-full-screen .widget-button,
-:-ms-fullscreen .widget-button { z-index: 10000; }
 
-/* --------- TOOLTIP PANEL ----------- */
+/* Tooltip panel */
 .tooltip-panel {
   position: absolute;
   top: 50%;
@@ -202,9 +165,21 @@ progress::-moz-progress-bar {
   flex-direction: column;
   align-items: flex-start;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  overflow: auto;
+  overflow: scroll !important;
+  scrollbar-gutter: stable both-edges;
   box-sizing: border-box;
 }
+.tooltip-panel::-webkit-scrollbar {
+  width: 10px;
+}
+.tooltip-panel::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 6px;
+}
+.tooltip-panel::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 6px;
+}
 
 /* Ensure content does not go under close button */
 .tooltip-content {
@@ -267,12 +242,62 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
+.help-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: #B0B0B0;
+  color: #333;
+  border: none;
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.widget-button {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  background-color: #F2F0EF;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #545454;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  z-index: 1000;
+  opacity: 1 !important;
+  visibility: visible !important;
+  margin-right: 8px;
+}
+.widget-button:hover { background-color: rgba(242,240,239,0.7); }
+.fullscreen-toggle { top: 12px; right: 12px; }
+.help-toggle { top: 12px; right: 52px; font-size: 18px; }
+.reset-camera-btn { top: 12px; right: 92px; font-size: 18px; line-height: normal; padding: 0; }
+.tooltips-toggle { top: 12px; right: 132px; font-size: 18px; }
+.fake-fullscreen .widget-button,
+:fullscreen .widget-button,
+:-webkit-full-screen .widget-button,
+:-moz-full-screen .widget-button,
+:-ms-fullscreen .widget-button { z-index: 10000; }
+
 /* --- MOBILE adjustments --- */
 @media (max-width: 600px) {
   .menu-content {
     width: 85vw;
     max-height: 90%;
-    overflow-y: auto;
+    overflow: scroll !important;
+    scrollbar-gutter: stable both-edges;
     padding: 40px 18px 14px;
     font-size: 14px;
   }
@@ -289,10 +314,11 @@ progress::-moz-progress-bar {
     width: auto;
     max-width: 94vw;
     min-width: 0;
-    max-height: 85%;
+    max-height: 55%;
     padding: 20px 10px 12px 10px;
     font-size: 13.5px;
-    overflow: auto;
+    overflow: scroll !important;
+    scrollbar-gutter: stable both-edges;
   }
   .tooltip-close {
     top: 8px;