style(#47): 💄 add background to the labels

add background to make the labels visible even while displaying black or white datasets

src/MeasurementControl/measurementsPanel.css

@@ -305,4 +305,21 @@
   pointer-events: none; 
 }
 
+/* On-canvas measurement label styling for improved contrast */
+.measurement-canvas-label {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  pointer-events: none;
+  color: #000;
+  background: rgba(255,255,255,0.95);
+  padding: 2px 6px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
+  border: 1px solid rgba(0,0,0,0.08);
+  font-weight: 600;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 2100;
+}
+
 

src/MeasurementControl/measurementsPanel.js

@@ -54,8 +54,8 @@ export function initMeasurementsPanel(viewer) {
         }
       })
       targetContainer = panel.querySelector('#measurements_list')
+      }
     }
-  }
   if (!targetContainer) {
     console.warn(
       'Measurements list container not found and dynamic injection failed'
@@ -186,13 +186,6 @@ export function initMeasurementsPanel(viewer) {
     if (!lbl) {
       lbl = document.createElement('div')
       lbl.className = 'measurement-canvas-label'
-      lbl.style.position = 'absolute'
-      lbl.style.transform = 'translate(-50%, -100%)'
-      lbl.style.pointerEvents = 'none'
-      lbl.style.color = 'white'
-      lbl.style.fontWeight = 'bold'
-      lbl.style.textShadow = '0 0 4px rgba(0,0,0,0.9)'
-      lbl.style.fontSize = '12px'
       overlay.appendChild(lbl)
       overlayMap.set(measurement.uuid, lbl)
     }
@@ -218,7 +211,8 @@ export function initMeasurementsPanel(viewer) {
           el.style.display = 'none'
         } else {
           el.style.display = ''
-          el.style.transform = `translate(${Math.round(pos.x)}px, ${Math.round(pos.y)}px)`
+          el.style.left = Math.round(pos.x) + 'px'
+          el.style.top = Math.round(pos.y) + 'px'
         }
       } catch (e) {
         // ignore