From fcbccbac96bc37c71c739d1624e885c39134a1bb Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Wed, 27 May 2026 18:10:26 +0530
Subject: [PATCH] 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.
---
 src-node/package-lock.json                    |  4 ++--
 .../Phoenix-live-preview/live-preview.css     | 23 ++++++++++++++++++-
 .../Phoenix-live-preview/panel.html           |  6 ++---
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src-node/package-lock.json b/src-node/package-lock.json
index 918476129a..b65ecac73d 100644
--- a/src-node/package-lock.json
+++ b/src-node/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@phcode/node-core",
-    "version": "5.1.20-0",
+    "version": "5.1.21-0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@phcode/node-core",
-            "version": "5.1.20-0",
+            "version": "5.1.21-0",
             "hasInstallScript": true,
             "license": "GNU-AGPL3.0",
             "dependencies": {
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
index f2228a9c31..1f6c64d549 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
+++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css
@@ -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;
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html
index d521be14e9..0a32900fd1 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/panel.html
+++ b/src/extensionsIntegrated/Phoenix-live-preview/panel.html
@@ -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>