Skip to content
This repository was archived by the owner on Aug 6, 2026. It is now read-only.

feat: add horizontal scrolling to tab bar - #53

Merged
k11kirky merged 2 commits into
mainfrom
fix/horizontal-scroll
Oct 21, 2025
Merged

feat: add horizontal scrolling to tab bar#53
k11kirky merged 2 commits into
mainfrom
fix/horizontal-scroll

Conversation

@jonathanlab

@jonathanlab jonathanlab commented Oct 21, 2025

Copy link
Copy Markdown
Contributor

Summary

  • Add horizontal scrolling to tab bar when tabs overflow window width
  • Display 80px gradient indicator on right edge when more tabs can be scrolled
  • Hide scrollbar for clean appearance
  • Gradient dynamically shows/hides based on scroll position, window resize, and tab changes

Changes

  • Wrap tabs in scrollable flex container with hidden scrollbar
  • Add scroll detection logic to track when gradient should display
  • Position gradient absolutely over tabs with pointer-events-none
  • Add CSS rule to hide webkit scrollbar

Test plan

  • Open many tabs to exceed window width
  • Verify tabs scroll horizontally without visible scrollbar
  • Verify gradient appears on right when more content is available
  • Verify gradient disappears when scrolled to the end
  • Verify gradient reappears when scrolling back
  • Verify gradient updates on window resize

🤖 Generated with Claude Code

@jonathanlab @claude
feat: add horizontal scrolling to tab bar with gradient indicator
9a819d5 
- Wrap tabs in scrollable container with hidden scrollbar
- Add 80px gradient overlay that appears when more tabs can be scrolled
- Gradient dynamically shows/hides based on scroll position and window size
- Maintain proper flex layout for tab bar content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@jonathanlab

jonathanlab commented Oct 21, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author
image

Gradient can be seen on the right

@jonathanlab
jonathanlab requested a review from a team October 21, 2025 17:52
@jonathanlab @claude
feat: auto-scroll active tab into view
d863775 
- Add useEffect to scroll active tab into view when selection changes
- Use scrollIntoView with smooth behavior and inline: nearest
- Add data-tab-id attribute to tabs for selection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@k11kirky
k11kirky merged commit cd0ae8a into main Oct 21, 2025
5 checks passed
@k11kirky
k11kirky deleted the fix/horizontal-scroll branch October 21, 2025 20:17
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer
@k11kirky k11kirky k11kirky approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jonathanlab @k11kirky