From 577a655aeef10b11a2944e5e8a7c1f359988147e Mon Sep 17 00:00:00 2001
From: mathieu <mathieubourbon49@gmail.com>
Date: Sat, 16 May 2026 02:26:40 +0200
Subject: [PATCH] style(host-detail): polish buttons, back link and port list

- Save changes / Add port: add btn-primary class for consistent blue accent
- Back button: stacked above page title, styled as a small bordered button
- Port list: remove row background, replace full border with bottom separator only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/client/host_detail.rs |  4 +++-
 style/rust-ipam.css       | 36 ++++++++++++++++++++++--------------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/client/host_detail.rs b/src/client/host_detail.rs
index 1868291..f8e1587 100644
--- a/src/client/host_detail.rs
+++ b/src/client/host_detail.rs
@@ -170,7 +170,7 @@ pub fn HostDetailPage() -> impl IntoView {
                             // ── Page header ──────────────────────────────────
                             <div class="page-header">
                                 <div class="page-header__left">
-                                    <a class="back-link" href="/hosts">"← Hosts"</a>
+                                    <a class="back-btn" href="/hosts">"← Hosts"</a>
                                     <h1>{move || name_sig.get()}</h1>
                                 </div>
                                 <button
@@ -236,6 +236,7 @@ pub fn HostDetailPage() -> impl IntoView {
 
                                     <div class="form-actions">
                                         <button
+                                            class="btn-primary"
                                             type="button"
                                             on:click=move |_| {
                                             update_action.dispatch(UpdateHost {
@@ -278,6 +279,7 @@ pub fn HostDetailPage() -> impl IntoView {
                                         on:input=move |e| new_port.set(event_target_value(&e))
                                     />
                                     <button
+                                        class="btn-primary"
                                         type="button"
                                         on:click=move |_| {
                                             let raw = new_port.get_untracked();
diff --git a/style/rust-ipam.css b/style/rust-ipam.css
index f52bda1..6af360f 100644
--- a/style/rust-ipam.css
+++ b/style/rust-ipam.css
@@ -1035,23 +1035,33 @@ td.col-actions {
   filter: brightness(0.9);
 }
 
-/* Left cluster inside page header (back link + title) */
+/* Left cluster inside page header: back button stacked above title */
 .page-header__left {
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--size-xs);
+}
+
+.back-btn {
+  display: inline-flex;
   align-items: center;
-  gap: var(--size-md);
-}
-
-.back-link {
-  font-size: var(--font-sm);
+  gap: 4px;
+  font-size: var(--font-xs);
+  font-weight: 500;
   color: var(--text-secondary);
+  background: var(--bg-surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 3px 10px;
   text-decoration: none;
-  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
 }
 
-.back-link:hover {
+.back-btn:hover {
+  background: var(--bg-hover);
   color: var(--text);
-  text-decoration: underline;
 }
 
 /* Delete button inside hosts table */
@@ -1131,18 +1141,16 @@ td.col-actions {
 .port-list {
   display: flex;
   flex-direction: column;
-  gap: var(--size-xs);
   margin-bottom: var(--size-md);
+  border-top: 1px solid var(--border);
 }
 
 .port-row {
   display: flex;
   align-items: center;
   gap: var(--size-md);
-  padding: var(--size-sm) var(--size-sm);
-  border-radius: var(--radius-sm);
-  background: var(--bg);
-  border: 1px solid var(--border);
+  padding: var(--size-sm) var(--size-xs);
+  border-bottom: 1px solid var(--border);
 }
 
 .port-row__number {