Fix misaligned in-progress status indicator in pipeline view

[hharshhsaini]

Fixes #18750

This pull request fixes a UI layout issue where the in progress (animated) pipeline status indicator appeared misaligned in the status column.
The animation was anchored to the top-left of the icon instead of its geometric center, causing the indicator to look irregular while running.

The fix corrects the animation origin so the status icon remains visually centered and stable during execution.

---

Testing done

Before the fix (irregular alignment):

• The animation used transform-origin: 0 0, causing spin/pulse animations to anchor to the top-left of the icon.
• The in-progress indicator appeared offset or “wobbly” while running.
• The issue was most visible when icon size was set to Large.

After the fix (centered alignment):

• Updated SCSS applies transform origin: center and transform-box: view-box.
• The animation is now anchored to the geometric center of the SVG.
• The in-progress indicator remains stable and centered within the status column.
• Verified consistency across Dashboard, Build History, and Project pages.

Manual verification:

• Ran Jenkins locally using mvn -pl war jetty:run
• Triggered multiple Pipeline builds to reproduce the issue
• Verified behavior for running, successful, and failed builds
• Tested on Chrome and Firefox
• Ran yarn lint and mvn spotless:apply

---

Screenshots (UI changes only)

Before

https://drive.google.com/file/d/1LlfE6JuqZfhKSHzN-F7gzxIjG0IuWCl6/view?usp=sharing

After

https://drive.google.com/file/d/1JM8MvTzKAVR1Ho6iKQSW2bz6_iOeS_0N/view?usp=sharing

---

Proposed changelog entries

• Fix misaligned in progress pipeline status indicator animation

---

Proposed changelog category

/label bug, web-ui

---

Proposed upgrade guidelines

N/A

---

Submitter checklist

• The issue is well described and linked.
• The changelog entry is appropriate for users and written in the imperative mood.
• Manual testing performed and described (UI only change).
• No new public APIs were added.
• No deprecations were introduced.
• UI changes do not introduce CSP regressions.
• No new dependencies were introduced.

---

Desired reviewers

@jenkinsci/core-pr-reviewers

---

Maintainer checklist

• There are at least two (2) approvals for the pull request and no outstanding requests for change.
• Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
• Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
• Proper changelog labels are set so that the changelog can be generated automatically.
• If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title.
• If it would make sense to backport the change to LTS, be a Bug or Improvement, and either the issue or pull request must be labeled as lts-candidate to be considered.

[welcome]

Yay, your first pull request towards Jenkins core was created successfully! Thank you so much!

A contributor will provide feedback soon. Meanwhile, you can join the chats and community forums to connect with other Jenkins users, developers, and maintainers.

[hharshhsaini]

Hi @MarkEWaite @krisstern @janfaracik @timja,

All feedback has been addressed and the PR is ready for another round of review.
Thank you for your time I’m happy to make further adjustments if needed.

[janfaracik]

Hey. Your screenshots don't show a clear before/after, the UI is also broken in the after - as well as when running locally.

The spinning ring is completely misaligned:

[MarkEWaite]

@hharshhsaini please refer to the comments from Jan that indicate a problem with the pull request. If you're not interested in fixing the problem, please close the pull request.

[hharshhsaini]

@hharshhsaini please refer to the comments from Jan that indicate a problem with the pull request. If you're not interested in fixing the problem, please close the pull request.

@MarkEWaite the layout looks broken in the current "after" state. I’ll revisit the CSS changes and adjust the fix so that the animation is centered without affecting surrounding layout or other icon states.

I’ll push an update shortly once the regression is resolved.

[hharshhsaini]

The previous global animation changes have been fully reverted. The fix is now strictly scoped to animated build-status icons inside _icons.scss (2-line change only). _style.scss matches upstream.

Layout matches master locally while keeping the animation centered.

Please let me know if anything else needs adjustment.

[hharshhsaini]

@janfaracik fixed the spinning ring , please have a look over this and give feedback for further changes.

[janfaracik]

@janfaracik fixed the spinning ring , please have a look over this and give feedback for further changes.

Could you post a before and after of the change? It'd be good to see it misaligned before, and then how your fix has resolved that issue.

[hharshhsaini]

these are the before screenshots of the spinning ring @janfaracik

[janfaracik]

I can't reproduce the initial issue (nor does the icon in the issue look standard). I've ran your PR and it's still broken:

Closing this.