From 7793c9eddec26865e42fe968a7ab73ca6e91a0e1 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Wed, 29 Jul 2026 09:29:06 +0000
Subject: [PATCH] fix: improve pin form CSS visibility, use inline-flex for
 layout

---
 web/app.js    |  2 +-
 web/style.css | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/web/app.js b/web/app.js
index 5133ca0..dd5531d 100644
--- a/web/app.js
+++ b/web/app.js
@@ -168,7 +168,7 @@ document.getElementById('leases-body').addEventListener('click', function (e) {
     // Show inline form, hide the Pin button
     var row = btn.closest('td');
     row.querySelector('.pin-btn').style.display = 'none';
-    row.querySelector('.pin-form').style.display = 'inline';
+    row.querySelector('.pin-form').style.display = 'inline-flex';
     row.querySelector('.pin-hostname').focus();
   }
 });
diff --git a/web/style.css b/web/style.css
index 738785d..d97e686 100644
--- a/web/style.css
+++ b/web/style.css
@@ -83,12 +83,26 @@ h1 {
   cursor: not-allowed;
 }
 
+.pin-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
 .pin-form input[type="text"] {
   padding: 4px 8px;
-  border: 1px solid #dcdde1;
+  border: 1px solid #0984e3;
   border-radius: 3px;
   font-size: 13px;
-  vertical-align: middle;
+  width: 130px;
+  outline: none;
+}
+.pin-form input[type="text"]:focus {
+  border-color: #0773c5;
+  box-shadow: 0 0 0 2px rgba(9,132,227,0.2);
+}
+.pin-form .btn {
+  padding: 3px 8px;
+  font-size: 12px;
 }
 
 table {