AOSSIE-Org / AOSSIE-Org/PictoPy-Website

[BUG]: Gallery Features Cards Overflow and Time Delay

未关闭
#13 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
12
派生
16
PR 合并指标
30 天内没有已合并 PR

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。