feat: live preview toolbar buttons improvements

Author: devvaannsh

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

@@ -1,5 +1,5 @@
 :root {
-    --toolbar-height: 32px;
+    --toolbar-height: 34px;
 }
 
 .live-preview-browser-btn {
@@ -185,6 +185,7 @@
     color: inherit;
     width: 28px;
     height: 22px;
+    font-size: 14px;
 }
 
 #live-preview-plugin-toolbar .btn-alt-quiet:hover,
@@ -435,7 +436,7 @@
 }
 
 .lp-edit-actions svg {
-    width: 13px;
+    width: 14px;
     height: 11px;
     pointer-events: none;
 }

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -1,6 +1,6 @@
 <div id="panel-live-preview">
     <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
-        <div style="width: 20%;display: flex;align-items: center;">
+        <div style="width: 20%;display: flex;align-items: center;gap: 6px;">
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button"><i class="fa-solid fa-arrow-rotate-right"></i></button>
             <button id="lpDesignModeBtn" title="{{designModeExpand}}" class="btn-alt-quiet toolbar-button">
                 <i class="fa-solid fa-expand"></i>
@@ -17,7 +17,7 @@
                 </button>
             </span>
         </div>
-        <div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;">
+        <div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;gap: 6px;">
 <!--            these are buttons that are always invisible to help central align the panel title-->
             <button id="safariButtonBallast" title="{{openInSafari}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                 <img src="thirdparty/devicon/icons/safari/safari-original.svg" />
@@ -48,7 +48,7 @@
                 <img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
             </button>
         </div>
-        <div style="width: 20%;display: flex;align-items: center; justify-content: flex-end">
+        <div style="width: 20%;display: flex;align-items: center; justify-content: flex-end;gap: 6px;">
             <button id="livePreviewSettingsBtn" title="{{livePreviewSettings}}"
                     class="btn-alt-quiet toolbar-button lp-settings-icon"><i class="fa-solid fa-gear"></i></button>
         </div>