Repository navigation
Conversation
Clip the rotating progress ring so its box no longer overflows the scrollable header.
🦋 Changeset detectedLatest commit: 83be98b The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📦 Bundle size✅ No significant changes. Every check is within budget. @lifi/widget
@lifi/wallet-management
@lifi/widget-light
Providers
Full integration
How to read this
|
Contributor
✅ E2E Dev Smoke — passing
4 passed · 0 failed · 0 skipped · 22s |
thesems
marked this pull request as ready for review
November 6, 2026 08:06
Contributor
E2E Examples — all passedAll examples passed in the latest run. |
Contributor
E2E Playground results
Details
📥 Download full HTML report (open the run → Artifacts → |
The CircularProgressPending root rotated, so its corners overflowed every scroll container around it (the header, the active transaction card and the step timer ring). Keep the root still and clipped, and rotate the SVG inside it. Center the history ring with a shared size and reuse ProgressTrack from the timer styles.
Member
This branch was successfully deployed
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
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.
Which Linear task is linked to this PR?
None.
Summary
While a transaction is in progress, the history button shows a spinning ring. During that time the header's scrollbar kept appearing and disappearing, which moved the whole view up and down.
The ring spins by rotating its 40×40 box. At 45° that box measures about 56px, so it sticks out about 8px past the button. The header container has
overflow: autoand no bottom padding, so on each turn the rotated box made it overflow and show a scrollbar for part of the time.screenrecording-2026-11-06_09-01-48.mp4
Changes
ActivitiesButton: the track and the spinning ring now sit inside a newProgressClipbox (40×40,overflow: hidden). The ring is round and fits inside the box, so the clip hides nothing visible.ProgressTrack: addedtop: 0, left: 0. Without them,IconButton'stext-align: centermoved the track 20px to the right inside the clip.@lifi/widget.Why was it implemented this way?
overflow: autowould affect every header layout and customtheme.headerconfig.overflow: hiddenon the button itself would clip the error badge in its top-right corner.ActivitiesButton.Visual showcase (Screenshots or Videos)
Test results
pnpm --filter @lifi/widget check:types: 0 errors. Biome and knip passed in the pre-commit hook.overflow:autocontainer with no bottom padding, holding a 40px box rotated 45°. Without the clip, the content was 60px tall in a 52px container (scrollbar). With the clip, both were 52px (no scrollbar).Known limitations
Checklist before requesting a review
🤖 Generated with Claude Code