From f44593cb5504f63528c44a64d715431c8a86db08 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 8 Jun 2026 16:46:20 +0000
Subject: [PATCH] Fix validate message placement and confirm ghost button
 styling

- Add id="action-row" to button flex div for reliable message anchoring
- Insert validate message after #action-row (not via btn.closest)
- Both Save and Validate already use kb-btn--ghost; explicit in markup

https://claude.ai/code/session_01MkM7p8Us3L8YAfLKGA13NS
---
 app/index.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/index.html b/app/index.html
index 9e00cb5..8d00029 100644
--- a/app/index.html
+++ b/app/index.html
@@ -935,7 +935,7 @@ function buildForm() {
   </div>
 
   <!-- Action row -->
-  <div style="display:flex;gap:10px;margin-top:8px">
+  <div id="action-row" style="display:flex;gap:10px;margin-top:8px">
     <button type="button" id="btn-save" class="kb-btn kb-btn--ghost kb-btn--lg" style="flex:2" onclick="saveInvoice()">${t("save")}</button>
     <button type="button" id="btn-validate" class="kb-btn kb-btn--ghost kb-btn--lg" style="flex:2" onclick="validateInvoice()">${t("validate")}</button>
     <button type="submit" id="btn-generate" class="kb-btn kb-btn--primary kb-btn--lg" style="flex:6">
@@ -1466,7 +1466,8 @@ function validateInvoice() {
     msg.style.color = "#e74c3c";
     msg.innerHTML = errors.map(e => `• ${e}`).join("<br>");
   }
-  btn.closest("div").after(msg);
+  const row = document.getElementById("action-row");
+  if (row) row.after(msg);
   setTimeout(() => msg.remove(), 5000);
 }