From ff68cd3ecb3b873dbe162aaf861264e3abc8d241 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Mon, 29 Sep 2025 10:18:01 -0400
Subject: [PATCH] Fix mobile grid spacing inconsistency - use single responsive
 grid for all 4 version cards

---
 frontend/src/components/VersionSelector.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index b43122d8..b13b4ea6 100644
--- a/frontend/src/components/VersionSelector.tsx
+++ b/frontend/src/components/VersionSelector.tsx
@@ -33,21 +33,21 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         </p>
       </div>
 
-      <div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto">
         {/* ESV Card */}
         <div
           onClick={() => onVersionSelect('esv')}
           className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
         >
-          <div className="p-8">
+          <div className="p-6">
             <div className="flex flex-col items-center text-center">
-              <div className="w-20 h-20 mb-4 flex items-center justify-center">
+              <div className="w-16 h-16 mb-3 flex items-center justify-center">
                 <img src="/logos/esv-logo.png" alt="ESV Logo" className="max-w-full max-h-full" />
               </div>
               <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                 ESV
               </h3>
-              <p className="text-gray-600 dark:text-gray-400 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 mb-3">
                 English Standard Version
               </p>
               <p className="text-sm text-gray-500 dark:text-gray-400">
@@ -62,15 +62,15 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
           onClick={() => onVersionSelect('nkjv')}
           className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
         >
-          <div className="p-8">
+          <div className="p-6">
             <div className="flex flex-col items-center text-center">
-              <div className="w-20 h-20 mb-4 flex items-center justify-center">
+              <div className="w-16 h-16 mb-3 flex items-center justify-center">
                 <img src="/logos/nkjv-logo.png" alt="NKJV Logo" className="max-w-full max-h-full" />
               </div>
               <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                 NKJV
               </h3>
-              <p className="text-gray-600 dark:text-gray-400 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 mb-3">
                 New King James Version
               </p>
               <p className="text-sm text-gray-500 dark:text-gray-400">
@@ -79,10 +79,8 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
             </div>
           </div>
         </div>
-      </div>
 
-      {/* NLT and CSB Row (below the grid) */}
-      <div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-6">
+        {/* NLT Card */}
         <div
           onClick={() => onVersionSelect('nlt')}
           className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
@@ -105,6 +103,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
           </div>
         </div>
 
+        {/* CSB Card */}
         <div
           onClick={() => onVersionSelect('csb')}
           className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"