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

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

diff --git a/kjvstudy_org/templates/chapter.html b/kjvstudy_org/templates/chapter.html
index dcd3b41..6a74c43 100644
--- a/kjvstudy_org/templates/chapter.html
+++ b/kjvstudy_org/templates/chapter.html
@@ -214,6 +214,39 @@
     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;