fix(live-preview): toolbar buttons occluded by centre section with long filenames

Replace fixed-width percentage layout with flex-based sizing so left
and right toolbar buttons are always visible and the centre filename
truncates with ellipsis. Move inline styles to live-preview.css.

Author: abose

src-node/package-lock.json

@@ -375,8 +375,13 @@
     color: rgba(100, 180, 255, 0.8);
 }
 
+#live-preview-plugin-toolbar {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
 .lp-toolbar-left {
-    width: 20%;
     display: flex;
     align-items: center;
     gap: 6px;
@@ -385,6 +390,22 @@
     flex-shrink: 0;
 }
 
+.lp-toolbar-centre {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.lp-toolbar-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+}
+
 #reloadLivePreviewButton,
 #designModeToggleLivePreviewButton {
     width: 28px;

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

@@ -1,5 +1,5 @@
 <div id="panel-live-preview">
-    <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
+    <div id="live-preview-plugin-toolbar" class="plugin-toolbar">
         <div class="lp-toolbar-left">
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-arrow-rotate-right"></i>
@@ -16,7 +16,7 @@
                 </button>
             </span>
         </div>
-        <div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;">
+        <div class="lp-toolbar-centre">
 <!--            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" />
@@ -47,7 +47,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 class="lp-toolbar-right">
             <button id="livePreviewSettingsBtn" title="{{livePreviewSettings}}"
                     class="btn-alt-quiet toolbar-button lp-settings-icon"><i class="fa-solid fa-gear"></i></button>
         </div>