From 4433b26bf8bcd76a6865cf91afb1e7b027278d54 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 15:38:36 +0100
Subject: [PATCH] fix: move pencil/save buttons to start of config bar for
 consistency

Pencil icon and Save/Cancel buttons now appear at the left side of
the AgentHealth config bar, matching the admin overview table where
the edit column is at the start of each row.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.module.css |  2 --
 ui/src/pages/AgentHealth/AgentHealth.tsx        | 10 +++++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 4b2c29f1..64bd44b1 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -106,7 +106,6 @@
   line-height: 1;
   display: inline-flex;
   align-self: flex-end;
-  margin-left: auto;
 }
 
 .configEditBtn:hover {
@@ -118,7 +117,6 @@
   display: flex;
   gap: 8px;
   align-self: flex-end;
-  margin-left: auto;
 }
 
 .configSaveBtn {
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 0103698c..66566a77 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -527,6 +527,10 @@ export default function AgentHealth() {
         <div className={styles.configBar}>
           {configEditing ? (
             <>
+              <div className={styles.configActions}>
+                <button className={styles.configSaveBtn} onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</button>
+                <button className={styles.configCancelBtn} onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</button>
+              </div>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Log Level</span>
                 <select className={styles.configSelect} value={String(configDraft.logForwardingLevel ?? 'INFO')}
@@ -565,13 +569,10 @@ export default function AgentHealth() {
                   <span>{configDraft.metricsEnabled ? 'On' : 'Off'}</span>
                 </label>
               </div>
-              <div className={styles.configActions}>
-                <button className={styles.configSaveBtn} onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</button>
-                <button className={styles.configCancelBtn} onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</button>
-              </div>
             </>
           ) : (
             <>
+              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}>&#x270E;</button>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Log Level</span>
                 <Badge label={appConfig.logForwardingLevel ?? 'INFO'} color={
@@ -599,7 +600,6 @@ export default function AgentHealth() {
                 <span className={styles.configLabel}>Metrics</span>
                 <Badge label={appConfig.metricsEnabled ? 'On' : 'Off'} color={appConfig.metricsEnabled ? 'success' : 'error'} variant="filled" />
               </div>
-              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}>&#x270E;</button>
             </>
           )}
         </div>