Skip to content

fix: Gallery Features overflow and hover delay #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VasuS609 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: Gallery Features overflow and hover delay #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/Pages/HowItWorks/HowItWorks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function GalleryFeatures() {
<h2 className="text-4xl font-bold text-center mb-12 text-gray-900 dark:text-white">
Gallery Features
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6 max-w-7xl mx-auto">
{steps.map((step, index) => (
<motion.div
key={index}
Expand All @@ -55,11 +55,11 @@ export default function GalleryFeatures() {
>
<div
onMouseEnter={() => {
// start a 1s timer to set active only if remains hovered
// start a short timer to avoid accidental hover triggers
hoverTimers.current[index] = window.setTimeout(() => {
setActiveStep(index);
hoverTimers.current[index] = null;
}, 1000);
}, 200);
}}
onMouseLeave={() => {
// cancel timer if leaving early; if already active, hide immediately
Expand Down Expand Up @@ -99,9 +99,9 @@ export default function GalleryFeatures() {
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3 }}
className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4"
className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4 overflow-hidden"
>
<p className="text-sm text-gray-500 dark:text-gray-400">
<p className="text-sm text-gray-500 dark:text-gray-400 break-words">
{step.details}
</p>
</motion.div>
Expand Down