From 2f5529a93a72958989b2e48453402351450e580d Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 11:44:57 +0100
Subject: [PATCH] improve Targets Management

---
 frontend/src/pages/TargetsPage.jsx | 10 +---------
 frontend/src/styles.css            |  7 +++++--
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/TargetsPage.jsx b/frontend/src/pages/TargetsPage.jsx
index 15890aa..4b962d0 100644
--- a/frontend/src/pages/TargetsPage.jsx
+++ b/frontend/src/pages/TargetsPage.jsx
@@ -70,7 +70,6 @@ export function TargetsPage() {
           <summary className="collapse-head">
             <div>
               <h3>New Target</h3>
-              <p>Connection settings for a PostgreSQL instance.</p>
             </div>
             <span className="collapse-chevron" aria-hidden="true">v</span>
           </summary>
@@ -79,32 +78,26 @@ export function TargetsPage() {
             <div className="field">
               <label>Name</label>
               <input placeholder="e.g. Prod-DB" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
-              <small>Unique display name in the dashboard.</small>
             </div>
             <div className="field">
               <label>Host</label>
               <input placeholder="e.g. 172.16.0.106 or db.internal" value={form.host} onChange={(e) => setForm({ ...form, host: e.target.value })} required />
-              <small>Must be reachable from the backend container.</small>
             </div>
             <div className="field">
               <label>Port</label>
               <input placeholder="5432" value={form.port} onChange={(e) => setForm({ ...form, port: Number(e.target.value) })} type="number" required />
-              <small>Default PostgreSQL port is 5432 (or your mapped host port).</small>
             </div>
             <div className="field">
               <label>DB Name</label>
               <input placeholder="e.g. postgres or appdb" value={form.dbname} onChange={(e) => setForm({ ...form, dbname: e.target.value })} required />
-              <small>Database name to monitor.</small>
             </div>
             <div className="field">
               <label>Username</label>
               <input placeholder="e.g. postgres" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
-              <small>DB user with read permissions on stats views.</small>
             </div>
             <div className="field">
               <label>Password</label>
               <input placeholder="Password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required />
-              <small>Stored encrypted in the core database.</small>
             </div>
             <div className="field">
               <label>SSL Mode</label>
@@ -117,8 +110,7 @@ export function TargetsPage() {
                 If you see "rejected SSL upgrade", switch to <code>disable</code>.
               </small>
             </div>
-            <div className="field">
-              <label>&nbsp;</label>
+            <div className="field submit-field">
               <button className="primary-btn">Create target</button>
             </div>
           </form>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 687fdd3..bdfb9f0 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -235,11 +235,11 @@ button {
 
 .field {
   display: grid;
-  gap: 6px;
+  gap: 4px;
 }
 
 .field label {
-  font-size: 13px;
+  font-size: 12px;
   color: #b9c6dc;
 }
 
@@ -260,6 +260,7 @@ button {
 
 .target-form {
   margin-top: 12px;
+  gap: 10px;
 }
 
 .primary-btn {
@@ -268,6 +269,8 @@ button {
   border-color: #3384cb;
   background: linear-gradient(180deg, #15528d, #114170);
   box-shadow: inset 0 1px 0 #5f8de144;
+  padding: 7px 12px;
+  min-height: 38px;
 }
 
 .primary-btn:hover {