fix(channels): prevent ChannelsTypeTabs from wrapping on small screens#1206
fix(channels): prevent ChannelsTypeTabs from wrapping on small screens#1206looplj merged 1 commit intolooplj:release/v0.9.xfrom
Conversation
On small screens with many channel types, the type filter tabs wrapped into multiple rows, consuming excessive vertical space. Switch to a single-row horizontal scroll layout with mouse wheel support. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the ChannelsTypeTabs component to enable horizontal scrolling across all screen sizes by replacing the responsive wrapping behavior with a non-wrapping flex container. It also introduces a wheel event handler to allow horizontal scrolling via the mouse wheel. A review comment suggests refining this handler to prevent simultaneous vertical page scrolling and to ensure it only intercepts events when horizontal overflow is actually present.
| <div className='mb-6 w-full overflow-hidden'> | ||
| <div | ||
| className='hide-scroll flex flex-nowrap items-center gap-2 overflow-x-auto scroll-smooth' | ||
| onWheel={(e) => { e.currentTarget.scrollLeft += e.deltaY; }} |
There was a problem hiding this comment.
The current onWheel implementation can lead to a confusing user experience. It causes the page to scroll vertically at the same time as the tabs scroll horizontally. It also intercepts mouse wheel events even when there's no horizontal overflow, preventing normal page scroll.
To improve this, you should prevent the default scroll behavior and only apply the horizontal scroll when the content is actually scrollable.
| onWheel={(e) => { e.currentTarget.scrollLeft += e.deltaY; }} | |
| onWheel={(e) => { if (e.currentTarget.scrollWidth > e.currentTarget.clientWidth) { e.preventDefault(); e.currentTarget.scrollLeft += e.deltaY; } }} |
looplj#1206) On small screens with many channel types, the type filter tabs wrapped into multiple rows, consuming excessive vertical space. Switch to a single-row horizontal scroll layout with mouse wheel support. Co-authored-by: nb5p <[email protected]> Co-authored-by: Claude Sonnet 4.6 <[email protected]>
2 participants
Prevent ChannelsTypeTabs from wrapping on small screens. Switch to a single-row horizontal scroll layout with mouse wheel support.
