AOSSIE-Org / AOSSIE-Org/PictoPy-Website

[BUG]: Gallery Features Cards Overflow and Time Delay

Offen
#13 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
12
Forks
16
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.