From 34065fa2ace625c543ef737d2fca3a685c299e5b Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Sat, 28 Feb 2026 21:40:21 +0100
Subject: [PATCH] fix(affiliate): move HTMX preview trigger outside grid
 container

The invisible trigger div was inside the CSS grid, occupying the first cell
(1fr) and pushing the form into the 380px column and the preview below it.
Moved it before the grid with display:none so it has no layout impact.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../admin/templates/admin/affiliate_form.html    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/src/padelnomics/admin/templates/admin/affiliate_form.html b/web/src/padelnomics/admin/templates/admin/affiliate_form.html
index 97b958a..42ea4bf 100644
--- a/web/src/padelnomics/admin/templates/admin/affiliate_form.html
+++ b/web/src/padelnomics/admin/templates/admin/affiliate_form.html
@@ -36,16 +36,18 @@ document.addEventListener('DOMContentLoaded', function() {
     </div>
   </header>
 
+  {# HTMX preview trigger — outside the grid so it takes no layout space #}
+  <div style="display:none"
+       hx-post="{{ url_for('admin.affiliate_preview') }}"
+       hx-target="#product-preview"
+       hx-trigger="load, input from:#affiliate-form delay:600ms"
+       hx-include="#affiliate-form"
+       hx-push-url="false">
+  </div>
+
   <div style="display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start" class="affiliate-form-grid">
 
     {# ── Left: form ── #}
-    {# Invisible trigger: fires preview on page load + any input change #}
-    <div hx-post="{{ url_for('admin.affiliate_preview') }}"
-         hx-target="#product-preview"
-         hx-trigger="load, input from:#affiliate-form delay:600ms"
-         hx-include="#affiliate-form"
-         hx-push-url="false">
-    </div>
     <form method="post" id="affiliate-form"
           action="{% if editing %}{{ url_for('admin.affiliate_edit', product_id=product_id) }}{% else %}{{ url_for('admin.affiliate_new') }}{% endif %}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">