From d2fc2748c76dd07c08ba23baeae5e72da4a84cf5 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Fri, 14 Nov 2025 16:50:31 -0500 Subject: [PATCH] Only show gradient on truncated sidenotes/marginnotes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Check scrollHeight vs clientHeight to determine if content is actually truncated before showing the fade gradient. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/chapter.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/kjvstudy_org/templates/chapter.html b/kjvstudy_org/templates/chapter.html index 7573609..8fd2241 100644 --- a/kjvstudy_org/templates/chapter.html +++ b/kjvstudy_org/templates/chapter.html @@ -19,8 +19,8 @@ overflow: visible; } -.sidenote:not(.expanded)::after, -.marginnote:not(.expanded)::after { +.sidenote.truncated:not(.expanded)::after, +.marginnote.truncated:not(.expanded)::after { content: ""; position: absolute; bottom: 0; @@ -138,6 +138,11 @@ document.addEventListener('DOMContentLoaded', function() { // Make sidenotes and marginnotes expandable and link verse references sidenotes.forEach(function(sidenote) { + // Check if content is actually truncated + if (sidenote.scrollHeight > sidenote.clientHeight) { + sidenote.classList.add('truncated'); + } + sidenote.addEventListener('click', function(e) { // Don't expand if clicking a link if (e.target.tagName !== 'A') {