✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

✅ PR preview is ready!

@cursor review

Summary

This PR adds clickable left/right scroll arrows to st.tabs when tabs overflow their container horizontally. The old passive gradient overlay (::after pseudo-element on StyledTabContainer) is replaced with interactive StyledScrollArrow buttons that include a gradient background, chevron icons, and smooth-scroll behavior. A ResizeObserver and scroll event listener keep the arrow visibility in sync with the actual scroll position. The feature includes E2E snapshot tests across browsers/themes and a frontend unit test for the no-overflow case.

Code Quality

Good patterns observed:

• Constants SCROLL_AMOUNT and SCROLL_TOLERANCE are correctly extracted to module-level scope (Tabs.tsx lines 41–42).
• useCallback is used for updateScrollState, scroll, handleScrollLeft, and handleScrollRight to maintain referential stability and prevent unnecessary effect re-runs.
• The scroll/resize effect (lines 112–129) has proper cleanup: both removeEventListener and resizeObserver.disconnect() are called in the cleanup function.
• The scroll event listener uses { passive: true } for performance.
• StyledScrollArrow is a styled.button — semantic HTML for interactive elements, following the accessibility guidelines in AGENTS.md.
• data-testid values follow the stComponentSubcomponent naming convention (stTabsScrollLeft, stTabsScrollRight).

Minor observations:

• The second useEffect (lines 131–145) mixes two concerns: calling updateScrollState() and reconciling the active tab. This is pre-existing behavior inherited from the original code and not a regression introduced by this PR, but could be improved in a follow-up.
• The fixed SCROLL_AMOUNT = 200 uses pixels, which is fine for scroll behavior (not visual styling) but could alternatively scale with container width for a more adaptive feel. This is a design choice, not a bug.
• The existing last-tab padding hack (lines 280–284: paddingRight: calc(${theme.spacing.lg} * 0.6)) is retained, which originally existed to keep content from being hidden behind the gradient. With the new arrow width being theme.spacing.xl, the padding may need revisiting if the last tab is visually clipped behind the arrow — but this should be caught by the E2E snapshots.

Test Coverage

Frontend unit test (Tabs.test.tsx):

• Adds a negative test verifying scroll arrows are not rendered when tabs don't overflow. This is appropriate given JSDOM doesn't implement actual scroll dimensions, so overflow can't be simulated in unit tests.
• Uses the correct queryByTestId + not.toBeInTheDocument() pattern per the RTL best practices in AGENTS.md.

E2E tests (st_tabs_test.py):

• test_overflow_scroll_arrows: Tests the full interactive flow — verifies right arrow is visible initially, left arrow is hidden, scrolls right to reveal left arrow, scrolls back to hide left arrow. Good use of Playwright's auto-waiting expect assertions.
• test_overflow_scroll_arrows_snapshot: Visual regression snapshots for both "right arrow only" and "both arrows" states, across light/dark themes and 3 browser engines (18 new snapshot images total).
• The wait_for_timeout(500) on line 123 is used to wait for smooth scroll animation to complete before taking a snapshot. The AGENTS.md discourages wait_for_timeout but acknowledges it's acceptable "when there is a specific purpose" — this qualifies, and the comment explains the rationale. That said, this could be fragile on slow CI runners; using wait_until to check that scrollLeft has stabilized would be more robust but harder to implement from Playwright.
• The existing test_tabs_render_correctly snapshot (st_tabs-fixed_width) is updated (6 changed snapshot images), which is expected since StyledTabContainer no longer applies the ::after gradient.

Coverage gaps (minor):

• No test for ResizeObserver behavior (e.g., arrows appearing/disappearing when the container resizes). This is hard to test in both JSDOM and E2E but worth noting.
• No keyboard navigation test for the scroll arrows (e.g., tabbing to arrow buttons and pressing Enter/Space).

Backwards Compatibility

No breaking changes. The modifications are purely frontend and internal:

• tabHeight was removed from StyledTabContainerProps, but this is an internal styled component, not part of the public API.
• The ::after gradient overlay is replaced by interactive arrow buttons — a visual enhancement, not a regression.
• No protobuf or Python API changes.
• The underlying st.tabs Python API is unchanged.

Security & Risk

No security concerns. This is a self-contained frontend UI enhancement with no new network calls, no data handling changes, and no new dependencies (the @emotion-icons/material-outlined and Icon component were already available in the codebase).

Risk assessment: Low. The change only affects visual presentation and scroll interaction of the tab bar. The ResizeObserver and scroll listener are well-guarded with cleanup. The worst-case failure mode is arrows not appearing/disappearing at the right time, which would be a visual bug, not a functional regression.

Accessibility

• Semantic HTML: StyledScrollArrow renders as a <button>, which is the correct element for click interactions.
• Accessible names: Both arrows have descriptive aria-label attributes ("Scroll tabs left" / "Scroll tabs right").
• Focus styling: The &:focus rule removes the native outline, and &:focus-visible replaces it with theme.shadows.focusRing. This follows the AGENTS.md guidance: "Don't remove focus outlines without replacing them. Prefer :focus-visible styles and use theme.shadows values for consistent rings."
• No duplicate tab stops: The arrows are simple buttons and don't create wrapper-level tab stop issues.
• Icon treatment: The Icon component wraps the chevron SVGs, which is consistent with the rest of the codebase.

Recommendations

1. Consider debouncing or throttling updateScrollState: The scroll event fires at high frequency during smooth scrolling. While React 18 batches the three setState calls, a requestAnimationFrame throttle on the scroll handler would reduce unnecessary work. This is optional and not blocking — the current approach works fine for the tab bar size.

2. Consider making the wait_for_timeout(500) in the E2E snapshot test more robust: If CI runners are slow, 500ms may not be enough for smooth scroll to complete. A wait_until approach checking the scroll position could be more reliable, though harder to implement from Playwright. Alternatively, the scroll animation could be disabled for testing.

3. Minor: the SCROLL_AMOUNT could be relative (e.g., a percentage of the container width) for a more adaptive scrolling feel on very wide or very narrow containers. This is a UX polish suggestion, not a functional issue.

Verdict

APPROVED: Well-implemented feature with proper React patterns, good accessibility support, comprehensive E2E snapshots, and no backwards compatibility concerns. The minor suggestions above are optional improvements that can be addressed in follow-up work.

This is an automated AI review by opus-4.6-thinking.

Consolidated Code Review: PR #13987 — [feat] Add scroll arrows for overflowing tabs in st.tabs

Summary

This PR adds interactive left/right scroll arrow buttons to st.tabs when tabs overflow their container horizontally. Previously, overflowing tabs only displayed a static right-side gradient fade with no way to scroll. Now, arrows conditionally appear based on scroll position: a right arrow when content overflows to the right, and a left arrow when scrolled away from the start. The implementation is purely frontend — no backend or protobuf changes.

Changed files (22):

• frontend/lib/src/components/elements/Tabs/Tabs.tsx — Core logic: scroll state tracking via useState/useCallback, event listeners, ResizeObserver, arrow rendering
• frontend/lib/src/components/elements/Tabs/styled-components.ts — Replaced ::after pseudo-element gradient with StyledScrollArrow button component; simplified StyledTabContainer
• frontend/lib/src/components/elements/Tabs/Tabs.test.tsx — Unit test for non-overflow case
• e2e_playwright/st_tabs_test.py — E2E tests for arrow visibility, interaction, and themed snapshots
• 18 snapshot image files (12 new, 6 updated)

Code Quality

Both reviewers agreed the code is well-structured and follows existing codebase patterns. Key strengths identified:

• useCallback is used for updateScrollState, scroll, handleScrollLeft, and handleScrollRight — ensuring referential stability and preventing unnecessary effect re-runs/re-renders.
• The scroll event listener uses { passive: true } for better scroll performance.
• ResizeObserver handles container resize (window resize, sidebar toggle) with proper cleanup on unmount.
• Constants (SCROLL_AMOUNT, SCROLL_TOLERANCE) are appropriately extracted to module scope.
• StyledTabContainer was cleanly simplified by removing the tabHeight prop and ::after pseudo-element.

Minor observations (non-blocking):

• The second useEffect (lines ~131–145) mixes two concerns: calling updateScrollState() and reconciling the active tab key when node.children.length changes. This is largely pre-existing technical debt (the existing eslint-disable TODO comment acknowledges this). Adding updateScrollState here is justified since ResizeObserver may not fire when tabs are added/removed if only scrollWidth changes.
• The scroll event fires frequently during smooth scroll animations, triggering three setState calls each time. While React 18 batches these automatically, a lightweight requestAnimationFrame throttle could reduce updates further. This is a minor optimization, not blocking.

Test Coverage

Both reviewers agreed coverage is good and well-aligned with the changes.

Frontend unit test (Tabs.test.tsx):

• Adds a negative test verifying scroll arrows are not rendered when tabs don't overflow. This is the correct approach given JSDOM's limitation of not implementing actual scrolling/layout. Uses proper queryByTestId + not.toBeInTheDocument() pattern.

E2E tests (st_tabs_test.py):

• test_overflow_scroll_arrows: Functional behavior test — right arrow visible initially, left arrow hidden, clicking right reveals left, clicking left back to start hides left. Uses Playwright's auto-wait assertions.
• test_overflow_scroll_arrows_snapshot: Visual regression test in both light and dark themes, capturing "right arrow only" and "both arrows" states across all browsers (chromium, firefox, webkit).

Both reviewers flagged the wait_for_timeout(500) at line 122 of st_tabs_test.py as a minor flakiness risk. The 500ms is reasonable for typical smooth scroll durations (200–400ms), but condition-based waiting would be more robust. This is non-blocking but worth monitoring.

Coverage gap noted (non-blocking): The frontend unit suite does not directly validate overflow transition logic (canScrollLeft/canScrollRight) because JSDOM doesn't model layout/scroll. This is covered at the E2E level. A mocked frontend test for arrow state transitions could improve coverage but is not required.

Backwards Compatibility

Both reviewers agreed — no breaking changes:

• No changes to the st.tabs() Python API or protobuf definitions.
• The visual change (static gradient → interactive arrows) is an intentional UX improvement.
• The removed tabHeight from StyledTabContainerProps is purely internal.

Security & Risk

Both reviewers agreed — no security concerns. Changes are purely frontend UI with no new data handling, network requests, or user input processing. Regression risk is low and mitigated by the added test coverage.

Edge case noted: Rapid clicking of scroll arrows may queue multiple smooth scrolls. Browsers natively handle this by interrupting previous smooth scrolls, so this is a non-issue.

Accessibility

Both reviewers agreed the accessibility implementation is strong:

• Semantic <button> elements for scroll arrows (not div + onClick).
• Descriptive aria-label attributes: "Scroll tabs left" / "Scroll tabs right".
• &:focus-visible with theme.shadows.focusRing for keyboard focus indication.
• Native keyboard accessibility (Enter/Space to activate, Tab to focus).

Additional observation (one reviewer): The scroll arrow buttons appear as separate tab stops in the keyboard navigation flow, independent of the tab list's internal arrow key navigation. This is standard behavior for scroll controls and acceptable.

Recommendations

1. Minor (test robustness): Consider replacing wait_for_timeout(500) in st_tabs_test.py with a condition-based wait to reduce flaky timing dependency on CI.
2. Minor (performance): Consider throttling updateScrollState via requestAnimationFrame to reduce state updates during smooth scroll animations.
3. Minor (test coverage): Consider adding a mocked frontend unit test that verifies arrow state transitions by mocking scroll metrics/events.

None of these are blocking.

Verdict

APPROVED — Both reviewers approved this PR. The feature is well-implemented with clean code, proper accessibility, good use of React hooks and DOM APIs, and thorough test coverage across unit and E2E tests. No blocking issues were identified.

Consolidated review by opus-4.6-thinking. Individual reviews from 2/2 expected models received.