From 38c0ee8d2f8ac762bc4331607b0d5c98bb69603f Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Thu, 4 Dec 2025 23:12:20 -0500
Subject: [PATCH] Fix cross-ref layout shift by using inline expand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extra refs now appear inline when expanded rather than
swapping between preview/details elements. This prevents
any layout shift when clicking to expand.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/chapter.html | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/kjvstudy_org/templates/chapter.html b/kjvstudy_org/templates/chapter.html
index f346e70..f50aba1 100644
--- a/kjvstudy_org/templates/chapter.html
+++ b/kjvstudy_org/templates/chapter.html
@@ -129,24 +129,21 @@
 
 /* Cross-refs: collapsed by default, show just first ref per group */
 .sidenote.cross-refs {
-    max-height: none;
-    overflow: visible;
     cursor: pointer;
 }
 
-.sidenote.cross-refs .xref-details {
+/* Extra refs hidden by default */
+.sidenote.cross-refs .xref-extra {
     display: none;
 }
 
-.sidenote.cross-refs.expanded .xref-details {
-    display: block;
-    margin-top: 0.3em;
-    padding-top: 0.3em;
-    border-top: 1px solid var(--border-color);
+/* Show extra refs when expanded */
+.sidenote.cross-refs.expanded .xref-extra {
+    display: inline;
 }
 
-/* Hide preview when expanded, show full details */
-.sidenote.cross-refs.expanded .xref-preview {
+/* Hide the +N indicator when expanded */
+.sidenote.cross-refs.expanded .xref-more {
     display: none;
 }
 
@@ -154,6 +151,7 @@
     font-size: 0.85em;
     color: var(--text-secondary);
     font-style: italic;
+    cursor: pointer;
 }
 
 @media (max-width: 760px) {
@@ -464,14 +462,7 @@ document.body.dataset.resourceReader = 'false';
                 {% set preview_count = commentary.cross_reference_groups | length %}
                 <label for="sn-{{ verse.verse }}-xrefs" class="margin-toggle sidenote-number"></label>
                 <input type="checkbox" id="sn-{{ verse.verse }}-xrefs" class="margin-toggle"/>
-                <span class="sidenote cross-refs">
-                    <span class="xref-preview">{% for group in commentary.cross_reference_groups %}<strong>{{ group.description }}:</strong> <a href="{{ group.refs[0].url }}">{{ group.refs[0].text }}</a>{% if not loop.last %}; {% endif %}{% endfor %}{% if total_refs > preview_count %} <span class="xref-more">+{{ total_refs - preview_count }}</span>{% endif %}</span>
-                    <span class="xref-details">
-                    {% for group in commentary.cross_reference_groups %}
-                        <strong>{{ group.description }}:</strong> {% for ref in group.refs %}<a href="{{ ref.url }}">{{ ref.text }}</a>{% if not loop.last %}; {% endif %}{% endfor %}.{% if not loop.last %}<br>{% endif %}
-                    {% endfor %}
-                    </span>
-                </span>
+                <span class="sidenote cross-refs">{% for group in commentary.cross_reference_groups %}<strong>{{ group.description }}:</strong> <a href="{{ group.refs[0].url }}">{{ group.refs[0].text }}</a>{% if group.refs|length > 1 %}<span class="xref-extra">; {% for ref in group.refs[1:] %}<a href="{{ ref.url }}">{{ ref.text }}</a>{% if not loop.last %}; {% endif %}{% endfor %}</span>{% endif %}{% if not loop.last %}. {% endif %}{% endfor %}{% if total_refs > preview_count %}<span class="xref-more"> +{{ total_refs - preview_count }}</span>{% endif %}</span>
             {% endif %}
         {% endif %}
     </p>