From 95eb9d1598483623b32cb375a948072d87aa7d08 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Wed, 1 Oct 2025 23:21:16 -0400
Subject: [PATCH] Improve mobile layout: stack Bible reference above verse text
 for better readability

---
 pages/[slug].vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/pages/[slug].vue b/pages/[slug].vue
index a5ce628..470dbb7 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -42,11 +42,18 @@
               :key="index"
               class="bg-blue-50 rounded-lg p-6"
             >
+              <!-- Mobile: Stack reference above text -->
+              <div class="md:hidden mb-3 text-right text-sm text-gray-600">
+                <div class="font-semibold">{{ ref.reference }}</div>
+                <div>({{ ref.version }})</div>
+              </div>
+              
+              <!-- Desktop: Side by side -->
               <div class="flex items-start justify-between gap-4">
                 <p :class="['text-gray-800 leading-relaxed flex-1', fontSizeClasses]">
                   {{ ref.text }}
                 </p>
-                <div class="text-right text-sm text-gray-600 whitespace-nowrap">
+                <div class="hidden md:block text-right text-sm text-gray-600 whitespace-nowrap">
                   <div class="font-semibold">{{ ref.reference }}</div>
                   <div>({{ ref.version }})</div>
                 </div>