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 摘要。