From 3ca3ec1e125a475bcfb1a28fb0990eb74b6f1bba Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 21 Aug 2026 15:23:15 +0530
Subject: [PATCH 1/2] fix: browser icons in live preview toolbar not properly
 centralized

---
 .../Phoenix-live-preview/live-preview.css            | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
index 1f6c64d549..40432d73a6 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
+++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
@@ -5,7 +5,17 @@
 .live-preview-browser-btn {
     opacity: 0;
     visibility: hidden;
-    transition: opacity 1s, visibility 0s linear 1s; 
+    transition: opacity 1s, visibility 0s linear 1s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.live-preview-browser-btn img {
+    display: block;
+    width: 14px;
+    height: 14px;
 }
 
 #live-preview-plugin-toolbar {

From 1c2dc909e3718d4b0565e780b6c0d6649637c9b0 Mon Sep 17 00:00:00 2001
From: Pluto <devvaannsh@gmail.com>
Date: Fri, 21 Aug 2026 15:50:31 +0530
Subject: [PATCH 2/2] fix: consistent spacing between live preview toolbar
 buttons

---
 .../Phoenix-live-preview/images/sprites.svg   |   8 +-
 .../Phoenix-live-preview/live-preview.css     | 164 ++++++------------
 2 files changed, 60 insertions(+), 112 deletions(-)

diff --git a/src/extensionsIntegrated/Phoenix-live-preview/images/sprites.svg b/src/extensionsIntegrated/Phoenix-live-preview/images/sprites.svg
index 721b454884..2d50de3e0c 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/images/sprites.svg
+++ b/src/extensionsIntegrated/Phoenix-live-preview/images/sprites.svg
@@ -7,20 +7,20 @@
     ]]></style>
     </defs>
 
-    <g class="sprite" id="open-icon" transform="translate(1 2)">
+    <g class="sprite" id="open-icon" transform="translate(3 2)">
         <path transform="translate(1 2)" fill="#a0a0a0" fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
         <path transform="translate(1 2)" fill="#a0a0a0" fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
     </g>
 
-    <g class="sprite" id="pinned-icon" transform="translate(1 2)">
+    <g class="sprite" id="pinned-icon" transform="translate(3 2)">
         <path transform="translate(1 2)" fill="#a0a0a0" d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A5.921 5.921 0 0 1 5 6.708V2.277a2.77 2.77 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354z"/>
     </g>
 
-    <g class="sprite" id="unpinned-icon" transform="translate(1 2)">
+    <g class="sprite" id="unpinned-icon" transform="translate(3 2)">
         <path transform="translate(1 2)" fill="#a0a0a0" d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a5.927 5.927 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707-.195-.195.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a5.922 5.922 0 0 1 1.013.16l3.134-3.133a2.772 2.772 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146z"/>
     </g>
 
-    <g class="sprite" id="reload-icon" transform="translate(1 2)">
+    <g class="sprite" id="reload-icon" transform="translate(2 2)">
         <path transform="translate(2 2)" fill="#a0a0a0" fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
         <path transform="translate(2 2)" fill="#a0a0a0"  d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
     </g>
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
index 40432d73a6..40fcf5e973 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
+++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
@@ -1,15 +1,17 @@
 :root {
     --toolbar-height: 30px;
+    --lp-toolbar-btn: 24px;
+    --lp-toolbar-chevron: 14px;
+    --lp-toolbar-gap: 6px;
+    --lp-toolbar-inset: 6px;
+    --lp-toolbar-fg: #a0a0a0;
+    --lp-toolbar-border: rgba(255, 255, 255, 0.1);
 }
 
 .live-preview-browser-btn {
     opacity: 0;
     visibility: hidden;
     transition: opacity 1s, visibility 0s linear 1s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
 }
 
 .live-preview-browser-btn img {
@@ -214,17 +216,21 @@
 
 .plugin-toolbar {
     height: var(--toolbar-height);
-    color: #a0a0a0;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    flex-direction: column;
+    color: var(--lp-toolbar-fg);
 }
 
 .toolbar-button {
+    width: var(--lp-toolbar-btn);
+    height: var(--lp-toolbar-btn);
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
     background-color: transparent;
-    width: 28px;
-    height: 22px;
+    color: var(--lp-toolbar-fg);
 }
 
 #live-preview-plugin-toolbar .btn-alt-quiet:hover,
@@ -248,23 +254,19 @@
 }
 
 .open-icon {
-    background: url("./images/sprites.svg#open-icon") no-repeat 72.5%;
-    width: 30px;
-    margin-left: 4px;
+    background: url("./images/sprites.svg#open-icon") center / 20px no-repeat;
 }
 
 .pin-icon {
-    background: url("./images/sprites.svg#pinned-icon") no-repeat 72.5%;
-    width: 30px;
+    background: url("./images/sprites.svg#pinned-icon") center / 20px no-repeat;
 }
 
 .unpin-icon {
-    background: url("./images/sprites.svg#unpinned-icon") no-repeat 72.5%;
-    width: 30px;
+    background: url("./images/sprites.svg#unpinned-icon") center / 20px no-repeat;
 }
 
 .reload-icon {
-    background: url("./images/sprites.svg#reload-icon") center no-repeat;
+    background: url("./images/sprites.svg#reload-icon") center / 20px no-repeat;
 }
 
 #live-preview-plugin-toolbar:hover .lp-settings-icon {
@@ -281,42 +283,8 @@
 
 .lp-settings-icon {
     opacity: 0;
-    color: #a0a0a0;
     visibility: hidden;
-    transition: opacity 1s, visibility 0s linear 1s; 
-    width: 30px;
-    height: 22px;
-    padding: 1px 6px;
-    flex-shrink: 0;
-    margin-top: 0;
-}
-
-.lp-device-size-btn-group {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin: 0 4px 0 3px;
-    border: 1px solid transparent;
-    border-radius: 3px;
-    box-sizing: border-box;
-}
-
-.lp-device-size-btn-group:hover {
-    border-color: rgba(255, 255, 255, 0.1);
-}
-
-.lp-device-size-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    cursor: pointer;
-    background: transparent;
-    box-shadow: none !important;
-    border: none;
-    color: #a0a0a0;
-    padding: 0;
-    margin: 0;
+    transition: opacity 1s, visibility 0s linear 1s;
 }
 
 .lp-device-size-icon:hover,
@@ -327,25 +295,8 @@
     box-shadow: none !important;
 }
 
-.lp-device-size-dropdown-chevron {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    background: transparent;
-    box-shadow: none !important;
-    border: none;
-    border-left: 1px solid transparent;
-    border-radius: 0 3px 3px 0;
-    color: #a0a0a0;
-    padding: 0 4px;
-    margin: 0;
-    height: 22px;
-    font-size: 10px;
-}
-
 .lp-device-size-btn-group:hover .lp-device-size-dropdown-chevron {
-    border-left-color: rgba(255, 255, 255, 0.1);
+    border-left-color: var(--lp-toolbar-border);
 }
 
 .lp-device-size-dropdown-chevron:hover,
@@ -391,46 +342,37 @@
     flex-direction: row;
 }
 
-.lp-toolbar-left {
+.lp-toolbar-left,
+.lp-toolbar-centre,
+.lp-toolbar-right {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding-left: 6px;
+    gap: var(--lp-toolbar-gap);
     box-sizing: border-box;
-    flex-shrink: 0;
+}
+
+.lp-toolbar-left {
+    flex: 1 1 0;
+    padding-left: var(--lp-toolbar-inset);
 }
 
 .lp-toolbar-centre {
-    flex: 1;
+    flex: 0 1 auto;
     min-width: 0;
-    display: flex;
     justify-content: center;
-    align-items: center;
     overflow: hidden;
 }
 
 .lp-toolbar-right {
-    display: flex;
-    align-items: center;
+    flex: 1 1 0;
+    padding-right: var(--lp-toolbar-inset);
     justify-content: flex-end;
-    flex-shrink: 0;
 }
 
 #reloadLivePreviewButton,
 #designModeToggleLivePreviewButton {
-    width: 28px;
-    height: 24px;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    color: #a0a0a0;
     border: 1px solid transparent;
     border-radius: 3px;
-    box-sizing: border-box;
-    flex-shrink: 0;
 }
 
 #live-preview-plugin-toolbar #reloadLivePreviewButton:hover,
@@ -440,10 +382,11 @@
     box-shadow: none !important;
 }
 
-.lp-mode-btn-group {
+.lp-mode-btn-group,
+.lp-device-size-btn-group {
     display: flex;
     align-items: stretch;
-    height: 24px;
+    height: var(--lp-toolbar-btn);
     margin: 0;
     border: 1px solid transparent;
     border-radius: 3px;
@@ -451,23 +394,26 @@
     flex-shrink: 0;
 }
 
-.lp-mode-btn-group:hover {
-    border-color: rgba(255, 255, 255, 0.1);
+.lp-mode-btn-group:hover,
+.lp-device-size-btn-group:hover {
+    border-color: var(--lp-toolbar-border);
 }
 
-.lp-mode-icon {
+.lp-mode-icon,
+.lp-device-size-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
+    width: var(--lp-toolbar-btn);
     height: 100%;
+    padding: 0;
+    margin: 0;
+    flex-shrink: 0;
     cursor: pointer;
     background: transparent;
     box-shadow: none !important;
     border: none;
-    color: #a0a0a0;
-    padding: 0;
-    margin: 0;
+    color: var(--lp-toolbar-fg);
 }
 
 #live-preview-plugin-toolbar .lp-mode-icon:hover,
@@ -482,26 +428,28 @@
     color: #FBB03B;
 }
 
-.lp-mode-dropdown-chevron {
+.lp-mode-dropdown-chevron,
+.lp-device-size-dropdown-chevron {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 14px;
+    width: var(--lp-toolbar-chevron);
     height: 100%;
+    padding: 0;
+    margin: 0;
+    flex-shrink: 0;
     cursor: pointer;
     background: transparent;
     box-shadow: none !important;
     border: none;
     border-left: 1px solid transparent;
     border-radius: 0;
-    color: #a0a0a0;
-    padding: 0;
-    margin: 0;
+    color: var(--lp-toolbar-fg);
     font-size: 10px;
 }
 
 .lp-mode-btn-group:hover .lp-mode-dropdown-chevron {
-    border-left-color: rgba(255, 255, 255, 0.1);
+    border-left-color: var(--lp-toolbar-border);
 }
 
 #live-preview-plugin-toolbar .lp-mode-dropdown-chevron:hover,