From ba4d2a60c6599bdc421f167f8184c0f89b07aafb Mon Sep 17 00:00:00 2001
From: mathieu <mathieubourbon49@gmail.com>
Date: Sat, 16 May 2026 02:30:19 +0200
Subject: [PATCH] style(host-detail): centre host title, move delete button to
 bottom-right

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

diff --git a/src/client/host_detail.rs b/src/client/host_detail.rs
index f8e1587..a9ee12f 100644
--- a/src/client/host_detail.rs
+++ b/src/client/host_detail.rs
@@ -168,18 +168,9 @@ pub fn HostDetailPage() -> impl IntoView {
 
                         view! {
                             // ── Page header ──────────────────────────────────
-                            <div class="page-header">
-                                <div class="page-header__left">
-                                    <a class="back-btn" href="/hosts">"← Hosts"</a>
-                                    <h1>{move || name_sig.get()}</h1>
-                                </div>
-                                <button
-                                    class="btn-danger-solid"
-                                    type="button"
-                                    on:click=move |_| show_delete_modal.set(true)
-                                >
-                                    "Delete host"
-                                </button>
+                            <div class="page-header detail-page-header">
+                                <a class="back-btn" href="/hosts">"← Hosts"</a>
+                                <h1 class="detail-page-title">{move || name_sig.get()}</h1>
                             </div>
 
                             // ── Identity form ─────────────────────────────────
@@ -305,6 +296,17 @@ pub fn HostDetailPage() -> impl IntoView {
                                 </div>
                             </section>
 
+                            // ── Danger zone ──────────────────────────────────
+                            <div class="danger-zone">
+                                <button
+                                    class="btn-danger-solid"
+                                    type="button"
+                                    on:click=move |_| show_delete_modal.set(true)
+                                >
+                                    "Delete host"
+                                </button>
+                            </div>
+
                             // ── Delete modal (conditional) ────────────────────
                             {move || show_delete_modal.get().then(|| view! {
                                 <DeleteModal
diff --git a/style/rust-ipam.css b/style/rust-ipam.css
index 6af360f..87a831f 100644
--- a/style/rust-ipam.css
+++ b/style/rust-ipam.css
@@ -1043,6 +1043,24 @@ td.col-actions {
   gap: var(--size-xs);
 }
 
+/* Detail page header: back button then centred title */
+.detail-page-header {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-xs);
+}
+
+/* Self-align the back button to the left while the title stays centred */
+.detail-page-header .back-btn {
+  align-self: flex-start;
+}
+
+.detail-page-title {
+  text-align: center;
+  width: 100%;
+  margin: 0;
+}
+
 .back-btn {
   display: inline-flex;
   align-items: center;
@@ -1182,3 +1200,10 @@ td.col-actions {
   width: 200px;
   flex-shrink: 0;
 }
+
+/* Delete button anchored to the bottom-right of the detail page */
+.danger-zone {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--size-lg);
+}