fix(staged): stop timeline hover jitter via scrollbar-gutter and icon layer hint#782
Merged
Conversation
… layer hint Two independent contributors made timeline-card content jog ~1px while sweeping the mouse across rows: - The centered .projects-list column re-centered whenever .main-panel's styled (layout-occupying) vertical scrollbar toggled, shifting every card ~4px horizontally. Add scrollbar-gutter: stable to .main-panel so the gutter is always reserved and the column never re-centers. - #775 (8f948a3) dropped will-change: transform from .timeline-row, so row icons re-snap sub-pixel positions during the hover background-color transition. Restore a layer hint, but pin the tiny .timeline-icon with transform: translateZ(0) instead of the full-width row, keeping #775's per-row memory win while regaining pixel stability. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes a small visual jitter that occurred when hovering over timeline rows.
ProjectHome.svelte: Setscrollbar-gutter: stableon the scrollable column so the centered content no longer re-centers (a ~4px jog) when the vertical scrollbar appears/disappears.TimelineRow.svelte: Addtransform: translateZ(0)to the timeline icon so it rasterizes on its own compositing layer at integer pixels and stays put during the row's hoverbackground-colortransition. This restores the layer hint perf(staged): pause offscreen animations and drop static will-change from timeline rows #775 dropped from.timeline-row, but scopes it to the tiny icon instead of the full-width row to preserve that commit's memory win.Test plan