fix(ui): overlapping UI elements and add resource units to tooltips

[choejwoo]

Related to #20637, #11513

After the above changes, I noticed that as nodeInfo increased, the resource-tree view UI started breaking.
It seems to have been caused by the combination of the two previous changes. I fixed the issue without altering the results of those already completed tasks. Therefore, I adjusted the number of resources displayed on each node in the resource-tree view to two, and improved the readability of the tooltip information.
I also noticed that the logic always showed a more button even when exactly four resources fit perfectly. I updated this so that only up to two resources are shown, and the more button appears when there are three or more resources.

The attached screenshots show the UI before and after the fix.
The issue only occurred in the resource-tree view. No changes were required for the pod view.
Additionally, to avoid duplicate code in pod view tooltips, I updated the resource unit display to reference a utility function I created.

Thanks!

AS-IS

Even though I added the resource unit, the view was still rendered incorrectly.

TO-BE

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 deleted from Bunnyshell

Available commands (reply to this comment):

• 🚀 /bns:deploy to deploy the environment

[afzal442]

LGTM!

[choejwoo]

While resolving the conflict, I also made a small CSS adjustment related to the arrow.
It looked like it was shifted 1px downward, so I moved it up by 1px, top -10px to -9px.
The screenshot is shown below.

[mkilchhofer]

@rumstead Can we cherry-pick this into 3.2? :)

The big number looks a bit awkward at the moment:

[argo-cd-cherry-pick-bot]

❌ Cherry-pick failed for 3.2. Please check the workflow logs for details.

[rumstead]

@mkilchhofer sure! can you create a cherry pick PR to the release-3.2 branch?

[mkilchhofer]

I quickly tried but since I am not familiar with frontend stuff, I think have to give up. It seems that 3 other changes influence the cherry-pick of this PR:

• chore(ui): convert ApplicationDetails components to functional components #23767
• fix(ui): show delete/details action dropdown for orphaned resource #24766
• chore(ui): fix Incorrect links to applications managed by other argo instances #23266

Nevertheless, I created a Draft-PR (#25224) and picked all those 4 commit just to see what CI says. But I think normally we want to pick each PR individually, right?