fix: give chat markdown proper block spacing and list indentation (#175) (#179)

* fix: give chat markdown proper block spacing and list indentation (#175)

* fix: keep h4-h6 at body size and trim trailing list margins (#175)

CHANGELOG.yaml

@@ -49,6 +49,7 @@
   - "Client Editor: The Context Length input is now shown for every client type — previously clients without a self-hosted API URL (e.g. OpenRouter and the remote API clients) were missing it from the edit dialog, leaving the client-list slider as the only way to change their context token budget."
   - "Node Editor: The Apply Style node crashed on any real style template id — it fed the id string into a code path expecting a visual type enum, so only the literal 'UNSPECIFIED' survived. The node now resolves the given template id directly and applies the full template. Note: passing 'UNSPECIFIED' as the template id no longer applies the configured art style — use the Apply Styles node for configuration-driven styles."
   - "Client Sliders: Adjusting the context or reasoning token budget sliders in the client list no longer jitters back and forth between values — stale client status echoes from the backend could snap the slider back to a previous value shortly after dragging. Saving a client also no longer triggers redundant status round-trips to the inference API, and quickly editing two clients back to back no longer drops the first client's pending change."
+  - "Help & Director Chat: Long answers no longer read as one solid block of text. Headings, paragraphs, lists, quotes and horizontal rules had no spacing of their own, and lists had lost the indent their markers live in — so bullets were invisible and numbered steps showed a bare '.' with the number clipped off. All of it now renders with proper structure and spacing."
   - "Node Editor: The Clean Up Narration node crashed with an AttributeError whenever it ran, and the raise/Stop node errored with 'Unknown exception' when its StageExit choice was selected."
   - "Node Editor: The Compress Context ID Part node emitted the compressed value on its `uncompressed` output instead of the original part, and the As Bool node's error path itself crashed with a TypeError when a value could not be cast to a boolean."
   - "Node Editor: Fixed two registry typos — `agents/editor/CleanUoCharacterMessage` is now `agents/editor/CleanUpCharacterMessage`, and the shipped director module `agernts/director/chat/instructGamestateUpdates` is now `agents/director/chat/instructGamestateUpdates`. Saved graphs referencing the old names keep loading via legacy aliases."

talemate_frontend/src/components/DirectorConsoleChatMessageMarkdown.vue

@@ -96,8 +96,109 @@ export default {
 
 <style scoped>
 
-.markdown-body > :deep(p:not(:first-child)) {
-    margin-top: 10px;
+/* Vuetify's reset zeroes padding and margin on every element, so all block
+   spacing below has to be restated - including the list padding the markers
+   live in. */
+
+.markdown-body :deep(p),
+.markdown-body :deep(ul),
+.markdown-body :deep(ol),
+.markdown-body :deep(pre),
+.markdown-body :deep(blockquote),
+.markdown-body :deep(table) {
+    margin-bottom: 12px;
+}
+
+.markdown-body :deep(p),
+.markdown-body :deep(li) {
+    line-height: 1.6;
+}
+
+/* Headings */
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3),
+.markdown-body :deep(h4),
+.markdown-body :deep(h5),
+.markdown-body :deep(h6) {
+    color: rgba(var(--v-theme-mutedheader), 1);
+    font-weight: 600;
+    line-height: 1.35;
+    margin: 22px 0 8px 0;
+}
+
+.markdown-body :deep(h1) {
+    font-size: 1.2em;
+}
+
+.markdown-body :deep(h2) {
+    font-size: 1.12em;
+}
+
+.markdown-body :deep(h3) {
+    font-size: 1.05em;
+}
+
+/* browser defaults put h5/h6 below body size, which inverts the hierarchy */
+.markdown-body :deep(h4),
+.markdown-body :deep(h5),
+.markdown-body :deep(h6) {
+    font-size: 1em;
+}
+
+/* Lists */
+.markdown-body :deep(ul),
+.markdown-body :deep(ol) {
+    padding-left: 24px;
+}
+
+.markdown-body :deep(li) {
+    margin-bottom: 6px;
+}
+
+.markdown-body :deep(li:last-child) {
+    margin-bottom: 0;
+}
+
+.markdown-body :deep(li > ul),
+.markdown-body :deep(li > ol) {
+    margin-top: 6px;
+    margin-bottom: 0;
+}
+
+.markdown-body :deep(li > p) {
+    margin-bottom: 6px;
+}
+
+.markdown-body :deep(li > *:last-child) {
+    margin-bottom: 0;
+}
+
+/* Quotes and rules */
+.markdown-body :deep(blockquote) {
+    border-left: 3px solid rgba(var(--v-theme-muted), 0.5);
+    padding-left: 12px;
+    color: rgba(var(--v-theme-muted), 1);
+}
+
+.markdown-body :deep(blockquote > *:last-child) {
+    margin-bottom: 0;
+}
+
+.markdown-body :deep(hr) {
+    border: none;
+    border-top: 1px solid rgba(var(--v-border-color), 0.3);
+    margin: 20px 0;
+}
+
+/* The message bubble supplies its own padding, so the outermost blocks of a
+   message must not add to it. */
+.markdown-body > :deep(*:first-child) {
+    margin-top: 0;
+}
+
+.markdown-body > :deep(*:last-child) {
+    margin-bottom: 0;
 }
 
 /* Inline code styling */
@@ -121,7 +222,6 @@ export default {
     word-break: break-word;
     overflow-wrap: anywhere;
     border-radius: 6px;
-    margin: 8px 0 10px 0;
 }
 
 .markdown-body :deep(pre code) {
@@ -147,7 +247,6 @@ export default {
 /* Table styling */
 .markdown-body :deep(table) {
     border-collapse: collapse;
-    margin: 10px 0;
     width: 100%;
 }