From f4811359e139d3b4b5133bf4fc1baf845c781c2b Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 16 Apr 2026 15:13:47 +0200
Subject: [PATCH] fix: keep view toggle visible in both compact and expanded
 modes

Move toolbar above the grid conditional so it renders in both
view modes. Hidden only on app detail pages (isFullWidth).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.tsx | 42 +++++++++++++-----------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 68855210..c3f1ce04 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -647,6 +647,28 @@ export default function AgentHealth() {
       )}
 
 
+      {/* View toolbar — hidden on app detail page */}
+      {!isFullWidth && (
+        <div className={styles.viewToolbar}>
+          <div className={styles.viewToggle}>
+            <button
+              className={`${styles.viewToggleBtn} ${viewMode === 'compact' ? styles.viewToggleBtnActive : ''}`}
+              onClick={() => toggleViewMode('compact')}
+              title="Compact view"
+            >
+              <LayoutGrid size={14} />
+            </button>
+            <button
+              className={`${styles.viewToggleBtn} ${viewMode === 'expanded' ? styles.viewToggleBtnActive : ''}`}
+              onClick={() => toggleViewMode('expanded')}
+              title="Expanded view"
+            >
+              <List size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Group cards grid */}
       {viewMode === 'expanded' || isFullWidth ? (
         <div className={isFullWidth ? styles.groupGridSingle : styles.groupGrid}>
@@ -705,25 +727,6 @@ export default function AgentHealth() {
           ))}
         </div>
       ) : (
-        <>
-        <div className={styles.viewToolbar}>
-          <div className={styles.viewToggle}>
-            <button
-              className={`${styles.viewToggleBtn} ${styles.viewToggleBtnActive}`}
-              onClick={() => toggleViewMode('compact')}
-              title="Compact view"
-            >
-              <LayoutGrid size={14} />
-            </button>
-            <button
-              className={styles.viewToggleBtn}
-              onClick={() => toggleViewMode('expanded')}
-              title="Expanded view"
-            >
-              <List size={14} />
-            </button>
-          </div>
-        </div>
         <div className={styles.compactGrid}>
           {groups.map((group) => (
             <div key={group.appId} className={styles.compactGridCell}>
@@ -824,7 +827,6 @@ export default function AgentHealth() {
             </div>
           ))}
         </div>
-        </>
       )}
 
       {/* Log + Timeline side by side */}