Skip to content

fix(ui-react): a hovered scroll thumb stops short of the content's edge - #16334

Merged
PavelLaptev merged 1 commit into
masterfrom
scroll-thumb-hover
Oct 14, 2026
Merged

PavelLaptev merged 1 commit into
masterfrom
scroll-thumb-hover

Conversation

@PavelLaptev

@PavelLaptev PavelLaptev commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

🧢 Changes

The scroll thumb widens to 7px under the pointer instead of 10px.

☕️ Reasoning

Hovered, the thumb reached 12px in: across the border of but.dev's sidebar cards (11px in) and onto a file list's rows (12px in). At 7px it reaches 9px in and lies beside those edges. It still draws over the content, and the strip to grab stays 14px. This touches every ScrollArea and ScrollBars.

🤖 Generated with Claude Code


Note

Low Risk
CSS-only scrollbar thumb sizing with no logic, auth, or data changes; global visual tweak across ScrollArea usages.

Overview
ScrollArea hover/drag scrollbar thumbs are narrower so they no longer sit on top of inset content (e.g. sidebar cards and file list rows).

The active/hover --thumb-size drops from 10px to 7px (thumb reaches ~9px from the edge instead of ~12px). The grab strip stays 14px; only the visual thumb width and the related comment change in ScrollArea.module.css, affecting all ScrollArea and ScrollBars consumers.

Reviewed by Cursor Bugbot for commit e0b1bf4. Bugbot is set up for automated code reviews on this repo. Configure here.

Under the pointer the thumb widened to 10px and reached 12px in, across
the border of but.dev's sidebar cards (11px in) and onto a file list's
rows (12px in). It now widens to 7px and reaches 9px in, so it still
lies over the content but beside those edges. The strip to grab stays
14px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

This pull request changes Lite's CSS. If the change shows on screen, before/after screenshots make it reviewable without checking the branch out — drag them into a comment, or use the lite-screenshots skill in this repository. Add the screenshots label once they are posted. Asked once; later pushes will not repeat it.

@github-actions

Copy link
Copy Markdown

🎩 Your Storybook has been served

  • 🫖 Have a look
  • 🔍 Inspect the changes: anything that looks different from master is waiting for your approval
  • 🤖 Service entrance for agents (MCP): https://scroll-thumb-hover--6ab536f5f40e41db628ccf1b.chromatic.com/mcp

@PavelLaptev
PavelLaptev merged commit f92ae22 into master Oct 14, 2026
47 checks passed
@PavelLaptev
PavelLaptev deleted the scroll-thumb-hover branch October 14, 2026 21:19

This branch was previously deployed

1 inactive deployment
Preview — e0b1bf45 Deployed Oct 14, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant