fix: buttons not properly aligned

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -776,7 +776,7 @@ function RemoteFunctions(config = {}) {
 
         if (dropZone === "inside") {
             // inside marker - outline around the element
-            marker.style.border = "1px dashed #4285F4";
+            marker.style.border = "2px dashed #4285F4";
             marker.style.backgroundColor = "rgba(66, 133, 244, 0.05)";
             marker.style.left = rect.left + "px";
             marker.style.top = rect.top + "px";
@@ -791,7 +791,7 @@ function RemoteFunctions(config = {}) {
 
             if (indicatorType === "vertical") {
                 // Vertical marker (for flex row containers)
-                marker.style.width = "2px";
+                marker.style.width = "3px";
                 marker.style.height = rect.height + "px";
                 marker.style.top = rect.top + "px";
 
@@ -803,7 +803,7 @@ function RemoteFunctions(config = {}) {
             } else {
                 // Horizontal marker (for block/grid containers)
                 marker.style.width = rect.width + "px";
-                marker.style.height = "2px";
+                marker.style.height = "3px";
                 marker.style.left = rect.left + "px";
 
                 if (dropZone === "after") {

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -54,18 +54,18 @@
 }
 
 .open-icon {
-    background: url("./images/sprites.svg#open-icon") center no-repeat;
+    background: url("./images/sprites.svg#open-icon") no-repeat 72.5%;
     width: 30px;
     margin-left: 4px;
 }
 
 .pin-icon {
-    background: url("./images/sprites.svg#pinned-icon") center no-repeat;
+    background: url("./images/sprites.svg#pinned-icon") no-repeat 72.5%;
     width: 30px;
 }
 
 .unpin-icon {
-    background: url("./images/sprites.svg#unpinned-icon") center no-repeat;
+    background: url("./images/sprites.svg#unpinned-icon") no-repeat 72.5%;
     width: 30px;
 }
 
@@ -80,6 +80,7 @@
     opacity: 1;
     visibility: visible;
     transition: unset;
+    padding-left: 7.5px;
 }
 
 .live-preview-settings input.error, .live-preview-settings input:focus.error{
@@ -95,13 +96,14 @@
     align-items: center;
     visibility: hidden;
     transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */
+    padding-left: 7.5px;
 }
 
 #livePreviewModeBtn {
     min-width: fit-content;
     display: flex;
     align-items: center;
-    margin: 2px 4px 0 3px;
+    margin: 3px 4px 0 3px;
     max-width: 80%;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -139,7 +141,7 @@
 #previewModeLivePreviewButton {
     color: #a0a0a0;
     margin-left: 3px;
-    margin-top: 3.5px;
+    margin-top: 3.3px;
     width: 30px;
     height: 22px;
     flex-shrink: 0;