Update style/defaults/style.css

style/defaults/style.css

@@ -45,12 +45,8 @@
 .viewer-container {
   display: none;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
+  top: 0; left: 0; right: 0; bottom: 0;
+  width: 100%; height: 100%;
   background: black;
   border: 1px solid #474558;
   border-radius: 10px;
@@ -61,7 +57,7 @@
   object-fit: contain;
 }
 
-/* When parent container is fullscreen, adjust viewer container */
+/* Fullscreen viewer adjustments */
 .fake-fullscreen .viewer-container,
 :fullscreen .viewer-container,
 :-webkit-full-screen .viewer-container,
@@ -73,7 +69,7 @@
   height: 100%;
 }
 
-/* Canvas fills the viewer container */
+/* Canvas styling */
 .ply-canvas {
   width: 100%;
   height: 100%;
@@ -81,13 +77,10 @@
   background-color: transparent;
   z-index: 1;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 0; left: 0; right: 0; bottom: 0;
 }
 
-/* Make sure canvas fills entire space in fullscreen */
+/* Canvas fills entire space in fullscreen */
 .fake-fullscreen .ply-canvas,
 :fullscreen .ply-canvas,
 :-webkit-full-screen .ply-canvas,
@@ -97,11 +90,10 @@
   height: 100vh;
 }
 
-/* Progress dialog styling (centered) */
+/* Progress dialog styling */
 .progress-dialog {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   border: none;
   background: rgba(0,0,0,0.7);
@@ -112,7 +104,6 @@
   color: white;
 }
 
-/* Progress bar styling */
 progress {
   width: 250px;
   height: 15px;
@@ -138,8 +129,7 @@ progress::-moz-progress-bar {
 .menu-content {
   display: none;
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(242,240,239,0.9);
   color: #545454;
@@ -153,7 +143,7 @@ progress::-moz-progress-bar {
   z-index: 1010;
 }
 
-/* Help-close button inside instructions panel */
+/* Help-close button */
 .help-close {
   position: absolute;
   top: 8px;
@@ -170,7 +160,7 @@ progress::-moz-progress-bar {
   font-size: 16px;
 }
 
-/* Button styling with improved visibility and spacing tweaks */
+/* Button styling */
 .widget-button {
   position: absolute;
   width: 32px;
@@ -190,9 +180,7 @@ progress::-moz-progress-bar {
   visibility: visible !important;
   margin-right: 8px;
 }
-.widget-button:hover {
-  background-color: rgba(242,240,239,0.7);
-}
+.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; }
@@ -201,11 +189,9 @@ progress::-moz-progress-bar {
 :fullscreen .widget-button,
 :-webkit-full-screen .widget-button,
 :-moz-full-screen .widget-button,
-:-ms-fullscreen .widget-button {
-  z-index: 10000;
-}
+:-ms-fullscreen .widget-button { z-index: 10000; }
 
-/* Tooltip panel: Always fits inside the viewer, scroll for overflow, close btn always visible */
+/* --------- TOOLTIP PANEL ----------- */
 .tooltip-panel {
   position: absolute;
   top: 50%;
@@ -216,10 +202,11 @@ progress::-moz-progress-bar {
   border: 1px solid #ddd;
   border-radius: 6px;
   padding: 15px;
-  max-width: 92vw;
-  max-height: 90vh;
+  max-width: 340px;
+  width: 92vw;
   min-width: 180px;
   min-height: 60px;
+  max-height: 90vh;
   z-index: 20000;
   display: none;
   flex-direction: column;
@@ -235,6 +222,10 @@ progress::-moz-progress-bar {
   min-width: 160px;
   max-width: 100%;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
 }
 
 .tooltip-close {
@@ -262,15 +253,22 @@ progress::-moz-progress-bar {
   margin-bottom: 10px;
   font-size: 14px;
   line-height: 1.4;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
 }
 
 .tooltip-image {
   max-width: 100%;
-  max-height: 220px;
+  max-height: 35vh;
   border-radius: 4px;
   margin-top: 5px;
   display: block;
+  object-fit: contain;
+  box-sizing: border-box;
 }
+
+/* --- Mobile adjustments --- */
 @media (max-width: 600px) {
   .tooltip-panel {
     top: auto;
@@ -281,19 +279,18 @@ progress::-moz-progress-bar {
     width: auto;
     max-width: 94vw;
     min-width: 0;
-    max-height: 60vh;
-    padding: 12px;
+    max-height: 55vh;
+    padding: 10px;
     font-size: 13.5px;
   }
   .tooltip-content {
     min-width: 0;
   }
   .tooltip-image {
-    max-height: 30vh;
+    max-height: 22vh;
   }
 }
 
-/* --- Mobile adjustments: when the widget container has the "mobile" class --- */
 .ply-widget-container.mobile .widget-button {
   width: 24px;
   height: 24px;
@@ -305,20 +302,11 @@ progress::-moz-progress-bar {
 .ply-widget-container.mobile .reset-camera-btn { top: 8px; right: 72px; }
 .ply-widget-container.mobile .tooltips-toggle { top: 8px; right: 104px; }
 
-/* PlayCanvas compatibility */
-#application-canvas {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
+#application-canvas { width: 100%; height: 100%; display: block; }
+html, body { margin: 0; padding: 0; height: 100%; }
 .progress-dialog p { margin: 0; padding: 5px; }
 
-/* NEW MOBILE RULES — ensure instructions panel fits on phones */
+/* Ensure help/instructions panel fits on mobile */
 @media (max-width: 600px) {
   .menu-content {
     width: 85vw;