fix(ui): fix timeline row hover wobble with stable compositing layers#424
fix(ui): fix timeline row hover wobble with stable compositing layers#424
Conversation
The previous fix (overflow: hidden + isolation: isolate) didn't fully resolve the wobble because compositing layer churn during background-color transitions caused subpixel position shifts. Replace isolation: isolate with will-change: transform on timeline rows to force permanent compositing layers, and remove overflow: hidden from card-content which was amplifying layout recalculations. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9f1d3de088
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| .card-content { | ||
| padding: 16px; | ||
| min-height: 80px; | ||
| overflow: hidden; | ||
| } |
There was a problem hiding this comment.
.card-content clipping around timeline rows
On branch cards that render footer actions, .timeline-row and .footer-row still intentionally overhang their container with margin: 0 -8px (TimelineRow.svelte:188-198, BranchTimeline.svelte:622-630). overflow: hidden on .card-content is the clip that keeps those hover backgrounds inside the card, so removing it lets the hovered row paint outside the content box again and reintroduces the footer-button/rounded-corner wobble this layout was avoiding.
Useful? React with 👍 / 👎.
| position: relative; | ||
| transition: background-color 0.15s ease; | ||
| isolation: isolate; | ||
| will-change: transform; |
There was a problem hiding this comment.
will-change from timeline rows
If a branch has a long history, this makes every idle timeline row opt into will-change: transform even though rows never actually transform. Because BranchTimeline renders the full items list in one #each (BranchTimeline.svelte:448-469), a large branch now creates one compositor layer per item, which increases GPU memory pressure and makes scrolling noticeably rougher on big timelines.
Useful? React with 👍 / 👎.
1 participant
Summary
isolation: isolatewithwill-change: transformon timeline rows to create a stable compositing layer that prevents hover-induced layout wobbleoverflow: hiddenfrom BranchCard.card-contentthat contributed to the wobbleTest plan
🤖 Generated with Claude Code