From 7cde6a2068a139eca1b54ac30bb29b1a8eb0cf8a Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Tue, 27 Jan 2026 22:21:20 +0000
Subject: [PATCH] fix: Improve Remote Agents page layout

- Fix header logo and title alignment using flexbox
- Move Refresh All button next to Register Agent button

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 templates/agents.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)
diff --git a/templates/agents.html b/templates/agents.html
index 00b98fe..5e40d84 100644
--- a/templates/agents.html
+++ b/templates/agents.html
@@ -275,8 +275,8 @@
 </head>
 
 <body>
-    <header style="padding: 15px 20px;">
-        <div class="logo" style="display: inline-block; vertical-align: middle;">
+    <header style="padding: 15px 20px; display: flex; align-items: center; gap: 12px;">
+        <div class="logo">
             <svg width="40" height="40" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.5"/>
                 <path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.7"/>
@@ -290,7 +290,7 @@
                 <rect x="38" y="76" width="24" height="4" rx="1" fill="#00d4ff"/>
             </svg>
         </div>
-        <h1 style="display: inline-block; vertical-align: middle; margin-left: 10px;">
+        <h1 style="margin: 0;">
             iNTERCEPT <span class="tagline">// Remote Agents</span>
         </h1>
     </header>
@@ -305,9 +305,6 @@
 
         <div class="agents-header">
             <h1>Remote Agents</h1>
-            <button class="agent-btn primary" onclick="refreshAllAgents()">
-                Refresh All
-            </button>
         </div>
 
         <!-- Add Agent Form -->
@@ -334,9 +331,14 @@
                         <input type="text" id="agentDescription" placeholder="Rooftop sensor node">
                     </div>
                 </div>
-                <button type="submit" class="agent-btn primary" style="width: auto; padding: 10px 24px;">
-                    Register Agent
-                </button>
+                <div style="display: flex; gap: 10px;">
+                    <button type="submit" class="agent-btn primary" style="width: auto; padding: 10px 24px;">
+                        Register Agent
+                    </button>
+                    <button type="button" class="agent-btn" style="width: auto; padding: 10px 24px;" onclick="refreshAllAgents()">
+                        Refresh All
+                    </button>
+                </div>
             </form>
         </div>
 
