fix(ui): add truncation and tooltip for long sync status branch names

[choejwoo]

Fixes #27200

This updates the Sync Status panel so long branch names are truncated with an ellipsis while keeping the revision visible, and shows the full branch name on hover. It also preserves the existing rendering for non-Synced and non-OutOfSync states.

Added a small helper for tooltip and revision-specific rendering, and split the existing utils logic slightly so the status panel can reuse the same formatting rules.

Long branch name with tooltip

Normal branch 1

Normal branch 2

When the status is neither Synced nor OutOfSync

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Title of the PR
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[bunnyshell]

✅ Preview Environment deployed on Bunnyshell

Component	Endpoints
argocd	https://argocd-ehmwql.bunnyenv.com/
argocd-ttyd	https://argocd-web-cli-ehmwql.bunnyenv.com/

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔴 /bns:stop to stop the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[Copilot]

Pull request overview

Updates the Application “Sync Status” panel rendering to prevent very long target revisions (e.g., branch names) from widening the panel, while still keeping the resolved revision visible and discoverable via hover.

Changes:

• Extracted revision-suffix formatting into a reusable helper (getSyncRevisionLabelSuffix) used by sync status rendering.
• Updated the status panel to render Synced/OutOfSync revisions with truncation + title tooltip for full branch name, while preserving existing rendering for other sync states.
• Added SCSS rules to constrain width and apply ellipsis truncation for long revision labels.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
ui/src/app/applications/components/utils.tsx	Extracts revision-suffix formatting logic into a helper reused by multiple UI render paths.
ui/src/app/applications/components/application-status-panel/application-status-panel.tsx	Introduces a dedicated renderer for sync revision display (truncation + tooltip) in Synced/OutOfSync states.
ui/src/app/applications/components/application-status-panel/application-status-panel.scss	Adds flex/overflow/ellipsis styling to prevent long revisions from expanding the status panel.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[choejwoo]

@crenshaw-dev
I've created another PR to address all comments. While reviewing the previous two PRs, I found a few additional cases to verify and a small helper refactor.
Since the change ended up a bit larger, I'd appreciate another look when you have time. Thanks.