AOSSIE-Org / AOSSIE-Org/PictoPy-Website

[BUG]: Gallery Features Cards Overflow and Time Delay

Aberta
#13 0 comentários 0 reações 0 responsáveis Ver no GitHub
bug
Linguagem predominante
TypeScript
Estrelas
12
Forks
16
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

### Bug Description

The Gallery Features section exhibits visual overflow when hovering over feature cards. The expanded content spills outside card boundaries, breaking the layout.

In `HowItWorks.tsx`, the grid forces 4 narrow columns at the lg breakpoint (lg:grid-cols-4). When hover reveals additional details, the constrained card width causes text to overflow.

Additionally, time delay of 1000ms is usually too long for hover UX; it feels laggy more than “optimized.”
For this case, use 200–300ms as a good default (quick but avoids accidental triggers), or 0ms if you want instant response. Performance impact is negligible either way—the main win is better user feel.

### Steps to Reproduce

1. Go to website
2. scroll to Gallery Features
3. Hover on any feature tab you will find that content is overflowing

Image

Image

Image

### Logs and Screenshots

https://github.com/user-attachments/assets/1cd2eaa0-7d0f-43a8-ae0e-956dca50211f

### Environment Details

It reproduces in `HowItWorks.tsx` at large-screen card hover with `lg:grid-cols-4`, while build still passes via `npm run build` on Windows.

### Impact

High - Major feature is broken

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.