From 50c80e338de4bcd9780f68b5757e0d6ef13c5e7e Mon Sep 17 00:00:00 2001 From: Patrick Erber Date: Fri, 29 May 2026 19:03:02 +0200 Subject: [PATCH 1/2] feat: update header spacing --- .../preview/markdownPreviewCodeTheme.css | 11 ++++ ui/leafwiki-ui/src/index.css | 58 ++++++++++++++++++- 2 files changed, 68 insertions(+), 1 deletion(-) diff --git a/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css b/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css index 4827d7451..0fbff70a0 100644 --- a/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css +++ b/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css @@ -92,6 +92,17 @@ max-width: 100%; min-width: 0; overflow-x: auto; + /* Take over block-level spacing from the inner
 so that the prose
+     "h2 + *" margin-reset selector targets this wrapper instead. */
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+
+.page-viewer__content .markdown-code-block pre,
+.markdown-editor__preview .markdown-code-block pre,
+.page-history__preview-body .markdown-code-block pre {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .page-viewer__content .markdown-code-block__actions,
diff --git a/ui/leafwiki-ui/src/index.css b/ui/leafwiki-ui/src/index.css
index 52d37c16b..75d638590 100644
--- a/ui/leafwiki-ui/src/index.css
+++ b/ui/leafwiki-ui/src/index.css
@@ -1534,7 +1534,7 @@
   }
 
   .page-viewer {
-    @apply mx-auto flex min-h-full w-full max-w-4xl flex-col px-8 pt-3 pb-0;
+    @apply mx-auto flex min-h-full w-full max-w-5xl flex-col px-8 pt-3 pb-0;
   }
 
   .page-viewer__subheader {
@@ -1573,6 +1573,62 @@
     @apply prose prose-base text-page-text dark:prose-invert mt-6 max-w-full flex-1 leading-relaxed;
   }
 
+  .page-viewer__content :where(h1),
+  .markdown-editor__preview :where(h1),
+  .page-history__preview-body :where(h1) {
+    @apply mt-10 mb-3;
+  }
+
+  .page-viewer__content :where(h2),
+  .markdown-editor__preview :where(h2),
+  .page-history__preview-body :where(h2) {
+    @apply mt-10 mb-3;
+  }
+
+  .page-viewer__content :where(h3),
+  .markdown-editor__preview :where(h3),
+  .page-history__preview-body :where(h3) {
+    @apply mt-8 mb-2;
+  }
+
+  .page-viewer__content :where(h4, h5, h6),
+  .markdown-editor__preview :where(h4, h5, h6),
+  .page-history__preview-body :where(h4, h5, h6) {
+    @apply mt-6 mb-2;
+  }
+
+  .page-viewer__content :where(h1, h2, h3, h4, h5, h6):first-child,
+  .markdown-editor__preview :where(h1, h2, h3, h4, h5, h6):first-child,
+  .page-history__preview-body :where(h1, h2, h3, h4, h5, h6):first-child {
+    @apply mt-2;
+  }
+
+  /* Heading directly after heading — tighter spacing */
+  .page-viewer__content :where(h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6),
+  .markdown-editor__preview :where(h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6),
+  .page-history__preview-body
+    :where(h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6) {
+    @apply mt-4;
+  }
+
+  .page-viewer__content :where(p),
+  .markdown-editor__preview :where(p),
+  .page-history__preview-body :where(p) {
+    @apply my-3;
+  }
+
+  .page-viewer__content :where(ul, ol),
+  .markdown-editor__preview :where(ul, ol),
+  .page-history__preview-body :where(ul, ol) {
+    @apply my-3;
+  }
+
+  .page-viewer__content :where(li),
+  .markdown-editor__preview :where(li),
+  .page-history__preview-body :where(li) {
+    @apply my-1;
+  }
+
   .page-viewer__metadata {
     @apply text-muted-foreground flex flex-wrap items-center text-[11px] leading-4 opacity-80;
   }

From 56b229af49a60a34e761de0128aa0fca4c0571af Mon Sep 17 00:00:00 2001
From: Patrick Erber 
Date: Fri, 29 May 2026 19:08:53 +0200
Subject: [PATCH 2/2] chore: update comment

---
 .../features/preview/markdownPreviewCodeTheme.css    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css b/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css
index 0fbff70a0..854698181 100644
--- a/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css
+++ b/ui/leafwiki-ui/src/features/preview/markdownPreviewCodeTheme.css
@@ -92,12 +92,20 @@
   max-width: 100%;
   min-width: 0;
   overflow-x: auto;
-  /* Take over block-level spacing from the inner 
 so that the prose
-     "h2 + *" margin-reset selector targets this wrapper instead. */
+  /* Own block-level spacing (replaces the inner 
 margins which are
+     now zeroed out below). */
   margin-top: 1.5em;
   margin-bottom: 1.5em;
 }
 
+/* When a heading precedes a code block, remove the top margin so only
+   the heading's own margin-bottom creates the gap. */
+.page-viewer__content :where(h1, h2, h3, h4, h5, h6) + .markdown-code-block,
+.markdown-editor__preview :where(h1, h2, h3, h4, h5, h6) + .markdown-code-block,
+.page-history__preview-body :where(h1, h2, h3, h4, h5, h6) + .markdown-code-block {
+  margin-top: 0;
+}
+
 .page-viewer__content .markdown-code-block pre,
 .markdown-editor__preview .markdown-code-block pre,
 .page-history__preview-body .markdown-code-block pre {