Skip to content

Style the commentary scrollbar and stop the flash ring clipping - #47

Merged
ylynfatt merged 1 commit into
mainfrom
commentary-scrollbar-and-padding
Jun 14, 2026
Merged

ylynfatt merged 1 commit into
mainfrom
commentary-scrollbar-and-padding

Conversation

@ylynfatt

Copy link
Copy Markdown
Owner

Why

Two small polish items on the unauthenticated gamecast commentary feed:

  1. The new-item highlight ring was being clipped on the left and right — the scroll container only had right padding, and overflow-y: auto clips the horizontal overflow where the 3px ring sits.
  2. The default browser scrollbar looked unstyled next to the rest of the feed.

Change

  • Swap the container's pr-1 for px-2 py-2 so the flash ring has room on every side instead of being cut off.
  • Add a slim, themed scrollbar (scrollbar-width: thin + ::-webkit-scrollbar thumb) using the existing --border / --muted-foreground tokens, so it adapts to light/dark mode.

Verification

Verified in isolation (dev stack was stopped): scrolling shows the slim scrollbar, and a new commentary line's ring is fully visible on all sides. CSS-only, scoped to Gamecast/Show.vue.

Note: a production deploy needs npm run build.

🤖 Generated with Claude Code

The commentary feed's scroll overflow clipped the new-item highlight ring
on the left and right (the container only had right padding). Give it
horizontal and vertical padding so the 3px ring has room, and add a slim,
themed scrollbar (thin track, rounded muted thumb) in place of the default
browser one.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@ylynfatt
ylynfatt merged commit c557f8f into main Jun 14, 2026
1 check passed
@ylynfatt
ylynfatt deleted the commentary-scrollbar-and-padding branch June 14, 2026 05:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant