From 8525b51984cf582dd036a22521f822d4ba4a4f5a Mon Sep 17 00:00:00 2001
From: ribbal <30695106+ribbal@users.noreply.github.com>
Date: Wed, 22 Jul 2026 21:12:32 +0100
Subject: [PATCH 1/2] tidy up page index alignment/styling

---
 otterwiki/renderer_embeddings.py       | 2 +-
 otterwiki/static/css/elements/page.css | 8 ++++++++
 otterwiki/templates/pageindex.html     | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/otterwiki/renderer_embeddings.py b/otterwiki/renderer_embeddings.py
index 913976e6..0ffbfac6 100644
--- a/otterwiki/renderer_embeddings.py
+++ b/otterwiki/renderer_embeddings.py
@@ -1196,7 +1196,7 @@ def embedding_render(
                 + '</ul></div>'
             )
 
-        togglediv = f"""<div class="d-inline-block custom-switch font-size-12 mb-10" style="transform: translateY(-36px);float:right;">
+        togglediv = f"""<div class="d-inline-block custom-switch font-size-12 mb-10" style="transform: translateY(-44px);float:right;">
     <input type="checkbox" id="switch-headings" {"checked" if show_toc else ""} value="" onchange="otterwiki.toggleClass(event.target.checked,'pagetoc')"><label for="switch-headings">Toggle page headings</label>
 </div>"""
 
diff --git a/otterwiki/static/css/elements/page.css b/otterwiki/static/css/elements/page.css
index b700cdb0..d6ed5446 100644
--- a/otterwiki/static/css/elements/page.css
+++ b/otterwiki/static/css/elements/page.css
@@ -11,6 +11,14 @@
 .page h5 { font-size: 2.0rem; }
 .page h6 { font-size: 1.6rem; }
 
+.page .pageindex-header {
+    font-size: var(--content-title-font-size);
+}
+
+.pageindex-embedding {
+    clear: right;
+}
+
 .page p,
 .page li {
     font-size: 1.6rem;
diff --git a/otterwiki/templates/pageindex.html b/otterwiki/templates/pageindex.html
index a0a6018d..b9c85a79 100644
--- a/otterwiki/templates/pageindex.html
+++ b/otterwiki/templates/pageindex.html
@@ -13,7 +13,7 @@
 {% block body_attrs %}data-index-path="{{ pagepath | slugify(keep_slashes=True) }}"{% endblock %}
 {% block content %}
     <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-10">
-        <h2 class="mb-0">{{ title }}</h2>
+        <h2 class="my-0">{{ title }}</h2>
 
         <div class="custom-switch font-size-12">
             <input

From 7b694a114a0bc99209bddd218a6bb680e70696d9 Mon Sep 17 00:00:00 2001
From: ribbal <30695106+ribbal@users.noreply.github.com>
Date: Wed, 22 Jul 2026 21:54:19 +0100
Subject: [PATCH 2/2] additional tweaks to page index alignment/styling

---
 otterwiki/renderer_embeddings.py       |  2 +-
 otterwiki/static/css/elements/page.css | 40 ++++++++++++++++++++------
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/otterwiki/renderer_embeddings.py b/otterwiki/renderer_embeddings.py
index 0ffbfac6..c2bb2422 100644
--- a/otterwiki/renderer_embeddings.py
+++ b/otterwiki/renderer_embeddings.py
@@ -1196,7 +1196,7 @@ def embedding_render(
                 + '</ul></div>'
             )
 
-        togglediv = f"""<div class="d-inline-block custom-switch font-size-12 mb-10" style="transform: translateY(-44px);float:right;">
+        togglediv = f"""<div class="d-inline-block custom-switch font-size-12 mb-10">
     <input type="checkbox" id="switch-headings" {"checked" if show_toc else ""} value="" onchange="otterwiki.toggleClass(event.target.checked,'pagetoc')"><label for="switch-headings">Toggle page headings</label>
 </div>"""
 
diff --git a/otterwiki/static/css/elements/page.css b/otterwiki/static/css/elements/page.css
index d6ed5446..79c03b96 100644
--- a/otterwiki/static/css/elements/page.css
+++ b/otterwiki/static/css/elements/page.css
@@ -11,14 +11,6 @@
 .page h5 { font-size: 2.0rem; }
 .page h6 { font-size: 1.6rem; }
 
-.page .pageindex-header {
-    font-size: var(--content-title-font-size);
-}
-
-.pageindex-embedding {
-    clear: right;
-}
-
 .page p,
 .page li {
     font-size: 1.6rem;
@@ -155,3 +147,35 @@
     margin: 0;
     background-color: transparent;
 }
+
+.page .pageindex-header {
+    font-size: var(--content-title-font-size);
+}
+
+/* Embedded PageIndex: move heading toggle into the title row */
+.pageindex-embedding {
+    position: relative;
+}
+
+/* The toggle immediately before an embedded index */
+.pageindex-embedding:before {
+    content: "";
+    display: block;
+}
+
+/* Parent page title + toggle alignment */
+article.page > h1 + .custom-switch {
+    float: right;
+    margin-top: -4.4rem;
+    margin-bottom: 0;
+}
+
+/* Recover the vertical space used by the old toggle position */
+article.page > h1 + .custom-switch + .pageindex-embedding {
+    clear: both;
+    margin-top: -2.75rem;
+}
+
+article.page .pageindex-embedding {
+    padding-top: 0.1rem;
+}