.

cards/templates/cards/_card_item.html

@@ -60,7 +60,7 @@
         </div>
       </div>
       <div class="buttons" style="margin-top:0.6rem">
-        <button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
+        <button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Edit</button>
         <button class="button is-small is-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Preview</button>
 
         <button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">Delete</button>

cards/templates/cards/_form.html

@@ -193,7 +193,7 @@
       <button class="button is-primary" type="submit">Save</button>
     </div>
     <div class="control">
-      <button class="button is-light" type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
+      <button class="button is-light" type="button" onclick="(function(){ const m=document.getElementById('modal-root'); if(m) m.innerHTML=''; const h=document.getElementById('htmx-form'); if(h) h.innerHTML=''; })()">Cancel</button>
     </div>
   </div>
 </form>

cards/templates/cards/_form_modal.html

@@ -0,0 +1,10 @@
+{# HTMX modal wrapper for the create/edit form #}
+<div class="modal is-active" id="card-modal">
+  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''" ></div>
+  <div class="modal-content">
+    <div style="max-width:920px; margin:0 auto;">
+      {% include 'cards/_form.html' %}
+    </div>
+  </div>
+  <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''"></button>
+</div>

cards/templates/cards/list.html

@@ -3,8 +3,8 @@
 {% block content %}
   <div class="level">
     <div class="level-left">
-      <div class="level-item">
-        <button class="button is-primary" hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
+        <div class="level-item">
+        <button class="button is-primary" hx-get="{% url 'cards:create' %}" hx-target="#modal-root" hx-swap="innerHTML">Add Dinosaur</button>
       </div>
       <div class="level-item">
         <a class="button is-light" href="{% url 'cards:backgrounds' %}">Manage backgrounds</a>

cards/views.py

@@ -91,20 +91,22 @@ def card_create(request):
             card.save()
             if is_htmx(request):
                 card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
-                # Also return an out-of-band fragment to replace/clear the form container
-                form_html = render_to_string('cards/_form.html', {'form': DinosaurForm(), 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
+                # Clear the modal via out-of-band so the modal-root is emptied
+                oob = '<div id="modal-root" hx-swap-oob="true"></div>'
                 return HttpResponse(card_html + oob)
             return redirect('cards:list')
         else:
             if is_htmx(request):
-                # Return the form as an out-of-band fragment so it updates the form container
-                form_html = render_to_string('cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
-                return HttpResponse(oob)
+                # Return the form wrapped in a modal fragment so it updates the modal-root
+                form_html = render_to_string('cards/_form_modal.html', {'form': form, 'background': background, 'backgrounds': backgrounds}, request=request)
+                return HttpResponse(form_html)
     else:
         form = DinosaurForm()
 
+    # If this is an HTMX request, return the modal-wrapped form so it can be
+    # injected into `#modal-root`. Otherwise return the standalone form page.
+    if is_htmx(request):
+        return render(request, 'cards/_form_modal.html', {'form': form, 'background': background, 'backgrounds': backgrounds})
     return render(request, 'cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds})
 
 
@@ -126,18 +128,19 @@ def card_edit(request, pk):
             card.save()
             if is_htmx(request):
                 card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
-                # Clear the form container via OOB so the edit form disappears after successful save
-                oob = '<div id="htmx-form" hx-swap-oob="true"></div>'
+                # Clear the modal via OOB so the modal-root is emptied
+                oob = '<div id="modal-root" hx-swap-oob="true"></div>'
                 return HttpResponse(card_html + oob)
             return redirect('cards:list')
         else:
             if is_htmx(request):
-                form_html = render_to_string('cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
-                return HttpResponse(oob)
+                form_html = render_to_string('cards/_form_modal.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds}, request=request)
+                return HttpResponse(form_html)
     else:
         form = DinosaurForm(instance=card)
 
+    if is_htmx(request):
+        return render(request, 'cards/_form_modal.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds})
     return render(request, 'cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds})