From fe23aebf5dc06e9fc2aa4f3d3859e5cb2a5d24df Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Fri, 5 Dec 2025 07:47:46 -0500
Subject: [PATCH] Fix tooltip right-edge overflow by measuring off-screen first
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The tooltip now renders off-screen first to get accurate dimensions
before calculating the final position. This ensures the flip logic
works correctly when the tooltip would overflow the right edge.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/static/base.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/kjvstudy_org/static/base.js b/kjvstudy_org/static/base.js
index e2bf3f0..e5c5900 100644
--- a/kjvstudy_org/static/base.js
+++ b/kjvstudy_org/static/base.js
@@ -1496,15 +1496,22 @@ function showKeyboardHelp() {
       '<span class="verse-tooltip-reference">' + verseData.reference + '</span>' +
       '<span class="verse-tooltip-text">' + verseData.text + '</span>';
 
-    // Position tooltip
-    var tooltipRect = tooltip.getBoundingClientRect();
+    // Position off-screen first to measure dimensions accurately
+    tooltip.style.left = '-9999px';
+    tooltip.style.top = '-9999px';
+    tooltip.classList.add('show');
+
+    // Force reflow to get accurate dimensions
+    var tooltipWidth = tooltip.offsetWidth;
+    var tooltipHeight = tooltip.offsetHeight;
+
     var padding = 10; // Minimum distance from viewport edge
     var x = mouseX + 15;
     var y = mouseY + 15;
 
     // Adjust if tooltip goes off right edge
-    if (x + tooltipRect.width > window.innerWidth - padding) {
-      x = mouseX - tooltipRect.width - 15;
+    if (x + tooltipWidth > window.innerWidth - padding) {
+      x = mouseX - tooltipWidth - 15;
     }
 
     // Ensure tooltip doesn't go off left edge
@@ -1513,8 +1520,8 @@ function showKeyboardHelp() {
     }
 
     // Adjust if tooltip goes off bottom edge
-    if (y + tooltipRect.height > window.innerHeight - padding) {
-      y = mouseY - tooltipRect.height - 15;
+    if (y + tooltipHeight > window.innerHeight - padding) {
+      y = mouseY - tooltipHeight - 15;
     }
 
     // Ensure tooltip doesn't go off top edge
@@ -1524,7 +1531,6 @@ function showKeyboardHelp() {
 
     tooltip.style.left = x + 'px';
     tooltip.style.top = y + 'px';
-    tooltip.classList.add('show');
   }
 
   // Hide tooltip