From 938121239175ed0b1cfd79503fc8d5316211b5de Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Mon, 29 Sep 2025 17:41:34 -0400
Subject: [PATCH] Fix text bouncing on version selector card hover by adding
 overflow-hidden to prevent content overflow during transform

---
 frontend/src/components/VersionSelector.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index b13b4ea6..fbd088d1 100644
--- a/frontend/src/components/VersionSelector.tsx
+++ b/frontend/src/components/VersionSelector.tsx
@@ -37,7 +37,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* 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"
+          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 overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">
@@ -60,7 +60,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* 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"
+          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 overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">
@@ -83,7 +83,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* 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"
+          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 overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">
@@ -106,7 +106,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* 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"
+          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 overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">