From b5833e98fc71ea2cab58e6b29187225723be3056 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Mon, 26 May 2025 20:20:41 -0400
Subject: [PATCH] Add responsive styles for verse tooltips

Improves tooltip display across mobile, tablet, and desktop
breakpoints with appropriate sizing, positioning, and typography
for each screen size.
---
 kjvstudy_org/templates/book_commentary.html | 33 +++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/kjvstudy_org/templates/book_commentary.html b/kjvstudy_org/templates/book_commentary.html
index 5ff7f8e..9a9e822 100644
--- a/kjvstudy_org/templates/book_commentary.html
+++ b/kjvstudy_org/templates/book_commentary.html
@@ -266,6 +266,39 @@ h1, h2, h3, h4, h5, h6 {
     margin-bottom: 8px;
 }
 
+/* Responsive tooltip styles */
+@media (max-width: 768px) {
+    .verse-tooltip {
+        position: fixed;
+        bottom: 2rem;
+        left: 1rem;
+        right: 1rem;
+        transform: none;
+        max-width: none;
+        min-width: auto;
+        padding: 1rem;
+        font-size: 1rem;
+        z-index: 1001;
+    }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+    .verse-tooltip {
+        max-width: 380px;
+        min-width: 280px;
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 1200px) {
+    .verse-tooltip {
+        max-width: 500px;
+        min-width: 400px;
+        font-size: 0.95rem;
+        padding: 1rem 1.25rem;
+    }
+}
+
 .verse-tooltip::after {
     content: '';
     position: absolute;