Improve notes display & edit

src/character/templates/character/notes_display.html

@@ -1,10 +1,13 @@
-<p>
+<div class="row" id="notes">
+    <h4 class="mt-3">
+        Notes
         <a hx-get="{% url "character:notes_change" pk=character.pk %}"
             hx-target="#notes"
-        hx-swap="innerHTML"
+            hx-swap="outerHTML"
             class="btn btn-primary btn-sm"
         >
             <i class="fa-solid fa-pen-to-square"></i> Edit
         </a>
-</p>
-{{ character.notes|linebreaks }}
+    </h4>
+    {{ character.notes|linebreaks }}
+</div>

src/character/templates/character/notes_update.html

@@ -1,5 +1,7 @@
-<form>
-    <p>
+<div class="row" id="notes">
+    <form>
+        <h4 class="mt-3">
+            Notes
             <a hx-post="{% url "character:notes_change" pk=character.pk %}"
                 hx-target="#notes"
                 hx-swap="innerHTML"
@@ -7,7 +9,8 @@
             >
                 <i class="fa-solid fa-save"></i> Save
             </a>
-    </p>
+        </h4>
         {% csrf_token %}
         <textarea class="form-control" name="notes" rows="10">{{ character.notes }}</textarea>
-</form>
+    </form>
+</div>

src/character/templates/character/view.html

@@ -361,8 +361,5 @@
             </div>
         {% endfor %}
     </div>
-    <h4 class="mt-3">Notes</h4>
-    <div class="row" id="notes">
     {% include "character/notes_display.html" %}
-    </div>
 {% endblock %}