refactor: make label styles consistent to other internal elements

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -982,11 +982,11 @@ function RemoteFunctions(config = {}) {
 
         label.style.position = 'fixed';
         label.style.zIndex = '2147483647';
-        label.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
-        label.style.color = 'white';
+        label.style.backgroundColor = '#2c2c2c';
+        label.style.color = '#cdcdcd';
         label.style.padding = '4px 8px';
-        label.style.borderRadius = '3px';
-        label.style.fontSize = '11px';
+        label.style.borderRadius = '6px';
+        label.style.fontSize = '10px';
         label.style.fontFamily = 'monospace';
         label.style.whiteSpace = 'nowrap';
         label.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.3)';
@@ -998,8 +998,16 @@ function RemoteFunctions(config = {}) {
         const arrowRect = arrow.getBoundingClientRect();
 
         // default position: 10px to the right of arrow, vertically centered
-        let labelLeft = arrowRect.right + 10;
-        const labelTop = arrowRect.top + (arrowRect.height / 2) - (labelRect.height / 2);
+        let labelLeft = arrowRect.right + 7.5;
+        let labelTop = arrowRect.top + (arrowRect.height / 2) - (labelRect.height / 2);
+
+        // add 3px offset for horizontal arrows to prevent touching the line
+        const arrowChar = arrow.innerHTML;
+        if (arrowChar === '↑') {
+            labelTop -= 3;
+        } else if (arrowChar === '↓') {
+            labelTop += 3;
+        }
 
         // if right side overflows, we switch to the left side
         if (labelLeft + labelRect.width > window.innerWidth) {