From a42c100f781a1d9b5ebf05fb4b1b02de2cf9b25d Mon Sep 17 00:00:00 2001
From: Francisco Alejandro Garcia Cebada <frgarc@microsoft.com>
Date: Tue, 13 Oct 2026 17:09:32 -0700
Subject: [PATCH] fix: Toolbar elements getting wrapped.

---
 .../webview-ui/src/monitor_panel/App.css         | 16 +++++++++++++++-
 .../src/monitor_panel/components/Toolbar.tsx     |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/App.css b/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/App.css
index 011e9fb..8928f8b 100644
--- a/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/App.css
+++ b/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/App.css
@@ -130,12 +130,22 @@ body.vscode-dark:not(.legacy-colors) {
 .toolbar {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 8px;
     padding: 8px 12px;
     background: var(--toolbar-bg);
     flex-shrink: 0;
 }
 
+/* Keep controls at their natural size; narrow panels wrap the toolbar instead
+   of squashing buttons or wrapping their labels inside the fixed height. */
+.toolbar button,
+.toolbar .sep,
+.toolbar .elapsed {
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
 .toolbar button {
     border: none;
     color: var(--text-bright);
@@ -164,7 +174,11 @@ body.vscode-dark:not(.legacy-colors) {
 
 .toolbar .status {
     font-size: 13px;
-    flex: 1;
+    flex: 1 1 80px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .toolbar .elapsed {
diff --git a/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/components/Toolbar.tsx b/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/components/Toolbar.tsx
index 5c194a3..86f40e7 100644
--- a/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/components/Toolbar.tsx
+++ b/FASTBuildMonitorVSCode/webview-ui/src/monitor_panel/components/Toolbar.tsx
@@ -66,7 +66,7 @@ export default function Toolbar({
                 {isMonitoring ? '\u23F9 Stop Monitoring' : '\u25B6 Start Monitoring'}
             </button>
             <div className="sep" />
-            <span className="status">{statusText}</span>
+            <span className="status" title={statusText}>{statusText}</span>
             <span className="elapsed">{elapsedTime}</span>
             <div className="sep" />
             <button className="zoom-btn" onClick={onZoomOut} title="Zoom Out">