[BUG]: components/flowing-menu trailing whitespace on prolonged hover. #141
Description
Describe the issue
Disclaimer: I really like this component and the effort put into it, I just happened to come upon this bug and thought I'd share. The reapeating marquee effect ends to soon leaving white space to grow on the right hand side untill its all white, then the animation reset and the scroll starts again. When using the FlowingMenu on a section what fills the entire width of the screen, the illusion breaks down even faster. I have found a soltion though.
The current approach used fixed percentage widths (w-[200%]) with only 4 repeated items. On wider screens, those items didn't fill the full width, so the content scrolled off leaving bare white before the animation looped.
I have fixed and tested my solution, and attached it here.
Essentially the fix is a two-group duplication technique:
- The animated track now uses w-max (intrinsic width based on content) instead of a fixed percentage
- The content is split into two identical groups (each with 8 text+image repetitions)
- Each group uses shrink-0 so it never compresses
- Text gets whitespace-nowrap to prevent wrapping
Also had to adjust the speed since we have doubled the content groups essentially from 15 to 30 seconds.
PS: I added a custom itemHeight property to this component that can be ignored, I just wanted controll over the height of menu items so I can get it tuned for my use cases.
Reproduction Link
No response
Steps to reproduce
Add FlowingMenu to any widescreen page and hold on menu item for a few seconds to reveal trailing whitespace.
Validations
- I have checked other issues to see if my issue was already reported or addressed