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

Fix text bouncing on version selector card hover by adding overflow-hidden to prevent content overflow during transform

Browse Source
This commit is contained in:
Ryderjj89
2025-09-29 17:41:34 -04:00
parent f8c402115d
commit 9381212391
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
{/* 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 overflow-hidden"
> >
<div className="p-6"> <div className="p-6">
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">
@@ -60,7 +60,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
{/* NKJV Card */} {/* NKJV Card */}
<div <div
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 overflow-hidden"
> >
<div className="p-6"> <div className="p-6">
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">
@@ -83,7 +83,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
{/* NLT Card */} {/* NLT Card */}
<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 overflow-hidden"
> >
<div className="p-6"> <div className="p-6">
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">
@@ -106,7 +106,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
{/* CSB Card */} {/* 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 overflow-hidden"
> >
<div className="p-6"> <div className="p-6">
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">