RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix mobile grid spacing inconsistency - use single responsive grid for all 4 version cards

Browse Source
This commit is contained in:
Ryderjj89
2025-09-29 10:18:01 -04:00
parent 01291fd859
commit ff68cd3ecb
1 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/VersionSelector.tsx
View File

@@ -33,21 +33,21 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
</p> </p>
</div> </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 */} {/* ESV Card */}
<div <div
onClick={() => onVersionSelect('esv')} 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" 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="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" /> <img src="/logos/esv-logo.png" alt="ESV Logo" className="max-w-full max-h-full" />
</div> </div>
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2"> <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
ESV ESV
</h3> </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 English Standard Version
</p> </p>
<p className="text-sm text-gray-500 dark:text-gray-400"> <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')} 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" 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="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" /> <img src="/logos/nkjv-logo.png" alt="NKJV Logo" className="max-w-full max-h-full" />
</div> </div>
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2"> <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
NKJV NKJV
</h3> </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 New King James Version
</p> </p>
<p className="text-sm text-gray-500 dark:text-gray-400"> <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>
</div> </div>
</div>
{/* NLT and CSB Row (below the grid) */} {/* NLT Card */}
<div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-6">
<div <div
onClick={() => onVersionSelect('nlt')} 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" 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>
</div> </div>
{/* CSB Card */}
<div <div
onClick={() => onVersionSelect('csb')} 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" 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"