Improve notes display & edit

src/character/templates/character/notes_display.html

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

src/character/templates/character/notes_update.html

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

src/character/templates/character/view.html

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