From 6ae55009e70ddd7b56885e7f804095de4c67fa9f Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 17:25:02 -0400
Subject: [PATCH] Fixed search box centering consistency - removed redundant
 container wrapper

- **Eliminated duplicate container** from VersionSelector component
- **Matches other page structures** - all pages now use App's main container
- **Consistent centering across all pages** - search bar positioned identically
- **No more shifting** when navigating between version selector and book selector

Version selector layout now perfectly matches BookSelector, ChapterSelector, BibleReader!
---
 frontend/src/components/VersionSelector.tsx | 124 ++++++++++----------
 1 file changed, 61 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index c9abafe3..801e6985 100644
--- a/frontend/src/components/VersionSelector.tsx
+++ b/frontend/src/components/VersionSelector.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Book, Users, Search } from 'lucide-react';
+import { Search } from 'lucide-react';
 
 interface VersionSelectorProps {
   onVersionSelect: (version: 'esv' | 'nkjv') => void;
@@ -9,75 +9,73 @@ interface VersionSelectorProps {
 const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSearchClick }) => {
   return (
     <div>
+      {/* Search Bar */}
+      <div className="flex justify-center mb-4">
+        <div className="w-full max-w-md relative">
+          <input
+            type="text"
+            placeholder="Search for verses, words, or phrases..."
+            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            onClick={onSearchClick}
+            readOnly
+          />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+        </div>
+      </div>
+
       {/* Version Selection */}
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
-        {/* Search Bar */}
-        <div className="flex justify-center mb-4">
-          <div className="w-full max-w-md relative">
-            <input
-              type="text"
-              placeholder="Search for verses, words, or phrases..."
-              className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              onClick={onSearchClick}
-              readOnly
-            />
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
-          </div>
-        </div>
+      <div className="text-center mb-12">
+        <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+          Choose Your Translation
+        </h2>
+        <p className="text-lg text-gray-600 dark:text-gray-400">
+          Select a Bible translation to begin your study
+        </p>
+      </div>
 
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
-            Choose Your Translation
-          </h2>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
-            Select a Bible translation to begin your study
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-2 gap-8 max-w-2xl 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="flex flex-col items-center text-center">
-                <div className="w-20 h-20 mb-4 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">
-                  English Standard Version
-                </p>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  A literal translation that balances clarity and dignity
-                </p>
+      <div className="grid md:grid-cols-2 gap-8 max-w-2xl 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="flex flex-col items-center text-center">
+              <div className="w-20 h-20 mb-4 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">
+                English Standard Version
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                A literal translation that balances clarity and dignity
+              </p>
             </div>
           </div>
+        </div>
 
-          {/* NKJV Card */}
-          <div
-            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="flex flex-col items-center text-center">
-                <div className="w-20 h-20 mb-4 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">
-                  New King James Version
-                </p>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  Updated language while preserving the majesty of the original
-                </p>
+        {/* NKJV Card */}
+        <div
+          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="flex flex-col items-center text-center">
+              <div className="w-20 h-20 mb-4 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">
+                New King James Version
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Updated language while preserving the majesty of the original
+              </p>
             </div>
           </div>
         </div>